:root {
  /* Surfaces — DUAL-TONE SYSTEM */
  --bg: #FAF7F2;           /* warm paper — flat section surface & body bg */
  --bg-alt: #FFFFFF;       /* white — card interiors */
  --bg-dark: #1A1A1A;      /* premium black — high-impact rounded blocks */
  --bg-dark-deep: #0A0A0A; /* deeper black for inner gradients */
  --bg-cream: #F0EDE5;     /* deeper cream — subtle card tint */

  /* Dark block geometry — premium rounded corners on all dark sections */
  --dark-block-radius: 32px;
  --dark-block-margin-x: 24px; /* horizontal breathing room so rounded corners show */

  /* Ink */
  --ink: #0A0A0A;
  --ink-soft: rgba(10,10,10,0.62);
  --ink-mute: rgba(10,10,10,0.42);
  --ink-faint: rgba(10,10,10,0.22);
  --line: rgba(10,10,10,0.08);
  --line-soft: rgba(10,10,10,0.04);
  --inner-hi: rgba(255,255,255,0.6);

  /* On-dark ink */
  --ink-d: #FAFAF7;
  --ink-d-soft: rgba(250,250,247,0.72);
  --ink-d-mute: rgba(250,250,247,0.45);
  --ink-d-faint: rgba(250,250,247,0.22);
  --line-d: rgba(255,255,255,0.08);

  /* Accents */
  --lima: #E8A020;
  --lima-deep: #C47A00;
  --lima-soft: rgba(232,160,32,0.18);
  --violet: #5B3FFF;
  --violet-soft: rgba(91,63,255,0.15);
  --coral: #FF4D2E;
  --coral-soft: rgba(255,77,46,0.15);

  --glass: rgba(255,255,255,0.6);
  --glass-d: rgba(10,10,10,0.4);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --mouse-x: 50%;
  --mouse-y: 50%;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Geist', 'Inter Tight', system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
  font-size: 17px;
  line-height: 1.65;
}

/* Congela interacciones del mouse durante scroll programático */
body.is-scrolling * { pointer-events: none !important; }

.mono { font-family: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }

/* ---------- Grain overlay (global, lighter on cream) ---------- */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 90;
  mix-blend-mode: multiply;
  opacity: 0.06;
}
.grain svg { width: 100%; height: 100%; }

/* ---------- Custom cursor ---------- */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 200;
  will-change: transform;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--lima-deep);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.cursor-ring {
  width: 28px; height: 28px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--ink);
  white-space: nowrap;
  transition: width 280ms var(--ease), height 280ms var(--ease),
              border-radius 280ms var(--ease), background 220ms var(--ease),
              border-color 220ms var(--ease), color 220ms var(--ease);
  animation: ringRotate 8s linear infinite;
}
@keyframes ringRotate { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* States */
.cursor-ring.link {
  width: 48px; height: 48px;
  border-color: var(--violet);
  color: var(--violet);
  animation-duration: 4s;
}
.cursor-ring.cta {
  width: 56px; height: 56px;
  background: var(--lima);
  border-color: var(--lima-deep);
  color: var(--ink);
  animation: none;
}
.cursor-ring.cta::before {
  content: '→';
  font-family: 'Geist Mono', monospace;
  font-size: 18px;
  color: var(--ink);
}
.cursor-ring.text {
  width: 2px; height: 24px;
  border-radius: 1px;
  background: var(--ink);
  border-color: var(--ink);
  animation: blink2 1.1s steps(2) infinite;
}
@keyframes blink2 { 50% { opacity: 0.2; } }

.cursor-ring .label { font-size: 10px; padding: 0 4px; }
.cursor-dot.hidden { opacity: 0; }

/* Click ripple */
.click-ripple {
  position: fixed;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--lima);
  pointer-events: none;
  z-index: 199;
  transform: translate(-50%, -50%);
  animation: ripple 700ms var(--ease) forwards;
}
@keyframes ripple {
  to { width: 120px; height: 120px; opacity: 0; }
}

@media (pointer: coarse) {
  .cursor-dot, .cursor-ring, .click-ripple { display: none; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 32px;
  background: rgba(250,250,247,0.92);
  border-bottom: 1px solid var(--line-soft);
  transition: padding 300ms var(--ease), background 300ms var(--ease);
}
.nav.scrolled {
  padding: 12px 32px;
  background: rgba(250,250,247,0.97);
}
.nav-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  max-width: 1600px;
  margin: 0 auto;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 15px;
}
.logo-prompt {
  color: var(--lima-deep);
  font-family: 'Geist Mono', monospace;
  font-weight: 500;
}
.logo-prompt .caret {
  display: inline-block;
  width: 8px; height: 14px;
  background: var(--lima-deep);
  margin-left: 2px;
  vertical-align: -2px;
  animation: blink 1.1s steps(2) infinite;
}
.logo:hover .caret { animation-duration: 0.4s; }
@keyframes blink { 50% { opacity: 0; } }

.nav-links {
  display: flex;
  gap: 28px;
  justify-content: center;
}
.nav-links a {
  font-family: 'Geist Mono', monospace;
  font-size: 13px;
  color: var(--ink-soft);
  text-transform: lowercase;
  letter-spacing: 0.02em;
  position: relative;
  padding: 4px 2px;
  transition: color 300ms var(--ease);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--lima-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 380ms var(--ease);
}
.nav-links a::before {
  content: '';
  position: absolute;
  right: -6px; bottom: -1px;
  width: 4px; height: 4px;
  background: var(--lima-deep);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 280ms var(--ease) 200ms;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a:hover::before { transform: scale(1); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-end;
}
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  color: var(--ink-soft);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-alt);
}
.dot {
  width: 6px; height: 6px;
  background: var(--lima-deep);
  border-radius: 50%;
  box-shadow: 0 0 0 0 var(--lima-deep);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(101,217,0,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(101,217,0,0); }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-family: 'Geist Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  transition: transform 200ms var(--ease), box-shadow 300ms var(--ease), background 300ms var(--ease);
  will-change: transform;
}
.btn-primary {
  background: var(--lima);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--inner-hi) inset, 0 4px 16px rgba(101,217,0,0.25);
}
.btn-primary:hover {
  box-shadow: 0 1px 0 var(--inner-hi) inset, 0 8px 32px rgba(101,217,0,0.4);
}
.btn-secondary {
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--bg-alt);
}
.btn-secondary:hover {
  background: var(--bg-cream);
}

/* On dark surfaces */
.on-dark .btn-secondary {
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--ink-d);
  background: rgba(255,255,255,0.04);
}

/* ============================================================
   TYPOGRAPHY — display
   ============================================================ */
.display-h1 {
  font-size: clamp(56px, 9vw, 144px);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 0.95;
  text-wrap: balance;
  font-variation-settings: "wght" 500;
  transition: font-variation-settings 500ms var(--ease);
}
.display-h1:hover { font-variation-settings: "wght" 700; }
.display-h2 {
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.00;
  text-wrap: balance;
  font-variation-settings: "wght" 500;
  transition: font-variation-settings 500ms var(--ease);
}
.display-h2:hover { font-variation-settings: "wght" 700; }

/* Letter cascade reveal */
.cascade { display: inline; }
/* Each word is a nowrap block so the browser wraps between words, not letters */
.cascade-word {
  display: inline-block;
  white-space: nowrap;
}
.cascade .ch {
  display: inline-block;
  transform: translateY(110%) rotate(12deg);
  opacity: 0;
  transition: transform 800ms var(--ease), opacity 600ms var(--ease);
}
.cascade.in .ch { transform: translateY(0) rotate(0deg); opacity: 1; }
/* Space between words — rendered as a normal inline element so it can collapse */
.cascade .ch.space {
  display: inline;
  white-space: normal;
  width: auto;
}

/* Mask-line paragraph reveal */
.reveal-lines .ln {
  display: block;
  position: relative;
  overflow: hidden;
}
.reveal-lines .ln::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--bg);   /* matches section surface, not canvas */
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 700ms var(--ease);
}
.on-dark .reveal-lines .ln::after { background: var(--bg-dark); }
/* All light sections now share var(--bg) — no overrides needed */
.reveal-lines.in .ln::after { transform: scaleX(0); }

/* Pre-headline */
.pre-headline {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  text-align: center;
  justify-content: center;
}
.pre-headline::before,
.pre-headline::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.pre-headline::before { margin-right: 16px; }
.pre-headline::after  { margin-left: 16px; }
.on-dark .pre-headline { color: var(--ink-d-mute); }
.on-dark .pre-headline::before,
.on-dark .pre-headline::after { background: var(--line-d); }

/* ---------- Section shell ---------- */
section {
  position: relative;
  padding: 140px 64px;
}
.on-dark { background: var(--bg-dark); color: var(--ink-d); }
.on-dark p { color: var(--ink-d-soft); }
.section-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 72px;
  max-width: 1600px;
  margin-left: auto; margin-right: auto;
}
.section-head .left { display: flex; flex-direction: column; gap: 24px; }
.section-head .right p {
  max-width: 50ch;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.55;
}
.on-dark .section-head .right p { color: var(--ink-d-soft); }

/* Subtle fade-in for the description paragraph — delayed after heading */
.section-head .right {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms 200ms cubic-bezier(0.22,1,0.36,1),
              transform 700ms 200ms cubic-bezier(0.22,1,0.36,1);
}
.section-head.sh-visible .right {
  opacity: 1;
  transform: translateY(0);
}

/* ── LAYOUT VARIANTS — break the monotony ── */

/* CENTERED: headline + desc stacked, centered, full-width */
.section-head.sh--center {
  grid-template-columns: 1fr;
  text-align: center;
  max-width: 900px;
  gap: 20px;
}
.section-head.sh--center .left { align-items: center; }
.section-head.sh--center .right p { max-width: 60ch; margin: 0 auto; }

/* WIDE: headline spans full width, desc sits below right-aligned */
.section-head.sh--wide {
  grid-template-columns: 1fr;
  gap: 0;
}
.section-head.sh--wide .left { gap: 20px; }
.section-head.sh--wide .right {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}
.section-head.sh--wide .right p {
  max-width: 44ch;
  text-align: right;
  border-right: 2px solid var(--ink-faint);
  padding-right: 20px;
}
.on-dark .section-head.sh--wide .right p { border-color: var(--line-d); }

/* REVERSE: desc on left, headline on right */
.section-head.sh--reverse {
  grid-template-columns: 1fr 1.6fr;
}
.section-head.sh--reverse .left { order: 2; }
.section-head.sh--reverse .right { order: 1; align-self: center; }
.section-head.sh--reverse .right p { max-width: none; }

/* TALL: headline huge, desc below as a single column */
.section-head.sh--tall {
  grid-template-columns: 1fr;
  gap: 16px;
}
.section-head.sh--tall .left { gap: 16px; }
.section-head.sh--tall .right p { max-width: 56ch; }

/* SPLIT-BOTTOM: headline left, desc bottom-right with accent line */
.section-head.sh--split-bottom {
  grid-template-columns: 1.2fr 1fr;
  align-items: start;
  gap: 48px;
}
.section-head.sh--split-bottom .right {
  padding-top: 48px;
  border-top: 1px solid var(--line);
}
.on-dark .section-head.sh--split-bottom .right { border-color: var(--line-d); }

/* Responsive: all variants collapse to single column */
@media (max-width: 768px) {
  .section-head.sh--center,
  .section-head.sh--wide,
  .section-head.sh--reverse,
  .section-head.sh--tall,
  .section-head.sh--split-bottom {
    grid-template-columns: 1fr !important;
    text-align: left !important;
    gap: 16px !important;
  }
  .section-head.sh--center .left { align-items: flex-start !important; }
  .section-head.sh--center .right p { margin: 0 !important; text-align: left !important; }
  .section-head.sh--wide .right { justify-content: flex-start !important; margin-top: 12px !important; }
  .section-head.sh--wide .right p { text-align: left !important; border-right: none !important; padding-right: 0 !important; border-left: 2px solid var(--ink-faint); padding-left: 12px !important; }
  .section-head.sh--reverse .left { order: 1 !important; }
  .section-head.sh--reverse .right { order: 2 !important; }
  .section-head.sh--split-bottom .right { padding-top: 16px !important; border-top: 1px solid var(--line) !important; }
}
.container { max-width: 1600px; margin: 0 auto; }

/* ============================================================
   HERO — dark premium block, rounded, lifted off the page
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 760px;
  /* Dark block — rounded top corners only, sits flush at bottom into the page */
  overflow: hidden;
  background: var(--bg-dark);
  border-radius: var(--dark-block-radius) var(--dark-block-radius) 0 0;
  isolation: isolate;
}
.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* Constellation gradient backdrop — dark hero */
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(91,63,255,0.12), transparent 40%),
    radial-gradient(circle at 80% 75%, rgba(101,217,0,0.10), transparent 45%),
    radial-gradient(circle at 60% 30%, rgba(255,77,46,0.07), transparent 35%),
    var(--bg-dark);
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
  border-radius: 24px;
  box-shadow: 0 32px 80px rgba(10,10,10,0.18);
}
.hero-video-frame {
  position: absolute;
  inset: 88px 32px 32px 32px;
  border-radius: 24px;
  overflow: hidden;
  z-index: 1;
  background: linear-gradient(135deg, #1a1a1a, #0a0a0a 30%, #2a1a3a 70%, #0a1a05);
  background-size: 200% 200%;
  animation: heroBgShift 18s ease-in-out infinite;
  box-shadow:
    0 32px 80px rgba(10,10,10,0.18),
    0 4px 12px rgba(10,10,10,0.08),
    inset 0 1px 0 rgba(255,255,255,0.1);
}
@keyframes heroBgShift {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}
.hero-video-frame::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(91,63,255,0.4), transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(101,217,0,0.25), transparent 55%),
    radial-gradient(ellipse at 50% 85%, rgba(255,77,46,0.3), transparent 60%);
  mix-blend-mode: screen;
  animation: heroBgShift 22s ease-in-out infinite reverse;
}
.hero-video-frame::after {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    0deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 4px);
  mix-blend-mode: overlay;
}
.hero-constellation {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* ----- Hero overlay content ----- */
.hero-content { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero-content > * { pointer-events: auto; }
.hero-tl {
  position: absolute; top: 112px; left: 64px;
  display: flex; flex-direction: column; gap: 12px;
}
.hero-tr {
  position: absolute; top: 112px; right: 64px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.hero-bl {
  position: absolute; bottom: 128px; left: 64px; right: 64px;
  display: flex; flex-direction: column; gap: 24px;
  max-width: 1100px;
}
.hero-br {
  position: absolute; bottom: 128px; right: 64px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}

/* Mini floating project windows */
.hero-windows {
  position: absolute;
  inset: 88px 32px 32px 32px;
  pointer-events: none;
  z-index: 2;
}
.h-win {
  position: absolute;
  background: rgba(250,250,247,0.97);
  border: 1px solid rgba(10,10,10,0.06);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 16px 32px rgba(10,10,10,0.16), 0 1px 0 var(--inner-hi) inset;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ink-soft);
  display: flex; flex-direction: column; gap: 4px;
  min-width: 180px;
  pointer-events: auto;
  animation: floatY 4s ease-in-out infinite;
}
.h-win .label { color: var(--ink-mute); text-transform: lowercase; font-size: 10px; }
.h-win .val { color: var(--ink); font-size: 18px; font-weight: 500; font-family: 'Geist', sans-serif; letter-spacing: -0.01em; }
.h-win .val .accent { color: var(--lima-deep); }
.h-win:nth-child(1) { top: 8%; right: 6%; animation-delay: 0s; }
.h-win:nth-child(2) { top: 38%; right: 3%; animation-delay: 1.3s; }
.h-win:nth-child(3) { top: 64%; right: 11%; animation-delay: 2.4s; }
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.badge-mono {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--lima-deep);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  background: rgba(101,217,0,0.1);
  border: 1px solid rgba(101,217,0,0.25);
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
}
.on-hero .badge-mono { background: rgba(101,217,0,0.15); color: #BFFF7A; border-color: rgba(101,217,0,0.4); }
.tick-bar {
  width: 40px; height: 2px;
  background: var(--lima-deep);
  animation: tickPulse 2.4s ease-in-out infinite;
  display: none;
}
@keyframes tickPulse {
  0%, 100% { opacity: 0.3; width: 24px; }
  50% { opacity: 1; width: 56px; }
}

.timestamp {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ink-d-mute);
  background: rgba(10,10,10,0.4);
  backdrop-filter: blur(12px);
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
}
.live-rec {
  background: rgba(10,10,10,0.4);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--ink-d-soft);
}

/* Hero typography over video frame — needs strong contrast */
.hero-pre {
  font-family: 'Geist Mono', monospace;
  font-size: 13px;
  color: #BFFF7A;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero-pre::before { content:''; width:24px; height:1px; background:#BFFF7A; }
.hero h1.display-h1 {
  color: #fff;
  text-shadow: 0 1px 40px rgba(0,0,0,0.4);
  font-size: clamp(48px, 7vw, 108px);
  /* Título estático: sin morfeo de peso al pasar el cursor */
  transition: none;
}
.hero h1.display-h1:hover { font-variation-settings: "wght" 500; }
.hero h1 .grad {
  background: linear-gradient(95deg, var(--lima) 10%, #fff 65%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  max-width: 60ch;
  font-size: clamp(15px, 1.15vw, 19px);
  color: rgba(255,255,255,0.82);
  line-height: 1.55;
}

.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-ctas .btn { padding: 16px 28px; font-size: 14px; }
.hero-ctas .btn-secondary {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  backdrop-filter: blur(12px);
}
.hero-ctas .btn-secondary:hover { background: rgba(255,255,255,0.16); }

/* Lost time counter — sits inside dark frame */
.lost-time {
  position: absolute;
  bottom: 56px; left: 64px;
  display: flex; flex-direction: column; gap: 4px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  text-transform: lowercase;
  z-index: 4;
  padding: 10px 14px;
  background: rgba(10,10,10,0.45);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  max-width: 160px;
}
.lost-time .lt-val {
  font-size: 18px;
  color: var(--coral);
  font-weight: 500;
  font-family: 'Geist Mono', monospace;
}
.lost-time .lt-label { color: rgba(255,255,255,0.45); }

.stack-mini { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.stack-mini-label { font-family: 'Geist Mono', monospace; font-size: 10px; color: rgba(255,255,255,0.5); text-transform: lowercase; }
.stack-mini-row { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.stack-chip {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  transition: color 220ms var(--ease);
  padding: 2px 0;
}
.stack-chip:hover { color: var(--lima); }
.stack-link {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.6);
}
.stack-link:hover { color: var(--lima); }

.scroll-indicator {
  position: absolute;
  bottom: 56px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  z-index: 4;
}
.scroll-line {
  width: 1px; height: 36px;
  background: rgba(255,255,255,0.2);
  position: relative;
  overflow: hidden;
}
.scroll-line::before {
  content: '';
  position: absolute;
  top: -8px; left: -1px;
  width: 3px; height: 8px;
  background: var(--lima);
  animation: scrollDot 2.2s ease-in-out infinite;
}
@keyframes scrollDot {
  0%   { top: -8px; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.scroll-label {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  text-transform: lowercase;
  letter-spacing: 0.1em;
}

/* ============================================================
   IMPACTO — flat paper section, no radius, no shadow
   Fuses visually with the page background
   ============================================================ */
.impact {
  background: var(--bg);
  position: relative;
  overflow: hidden;
  /* No margin, no radius, no border — flat canvas */
}
/* Subtle dot-grid texture retained */
.impact::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(10,10,10,0.18) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.04;
  pointer-events: none;
}
.impact-head { margin-bottom: 80px; display: flex; flex-direction: column; gap: 20px; }
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}
.metric {
  padding: 24px 32px;
  position: relative;
  display: flex; flex-direction: column; gap: 16px;
  cursor: pointer;
}
.metric + .metric::before {
  content: '';
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line), transparent);
}
.metric-num {
  font-size: clamp(56px, 7vw, 96px);
  color: var(--ink);
  font-weight: 500;
  font-feature-settings: 'tnum';
  letter-spacing: -0.045em;
  line-height: 1;
  display: flex; align-items: baseline;
  gap: 4px;
}
.metric:hover .metric-num { color: var(--lima-deep); }
.metric-trend {
  margin-top: 4px;
  height: 32px;
  opacity: 0;
  transition: opacity 350ms var(--ease);
}
.metric:hover .metric-trend { opacity: 1; }
.metric-label {
  font-family: 'Geist Mono', monospace;
  font-size: 13px;
  color: var(--ink-soft);
  text-transform: lowercase;
}
.metric-desc {
  font-size: 12px;
  color: var(--ink-mute);
  font-family: 'Geist Mono', monospace;
}

/* ── Impacto · statement (sin métricas inventadas) ── */
.statement {
  padding: 170px 64px;
  position: relative;
  overflow: hidden;
}
/* Marca de agua del prompt ">_" — enorme y tenue al fondo */
.statement-glyph {
  position: absolute;
  right: -2vw;
  bottom: -6vw;
  font-family: 'Geist Mono', monospace;
  font-weight: 500;
  font-size: clamp(180px, 38vw, 560px);
  line-height: 0.8;
  color: var(--lima);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
}
.statement .container { position: relative; z-index: 1; }
.statement-kicker {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lima);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 44px;
}
.statement-kicker::before {
  content: '';
  width: 36px;
  height: 1px;
  background: var(--lima);
}
.statement-h {
  font-size: clamp(40px, 6.4vw, 104px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.98;
  color: var(--ink-d);
  max-width: 17ch;
  text-wrap: balance;
}
.statement-h em {
  font-style: normal;
  color: var(--lima);
}
.statement-sub {
  margin-top: 34px;
  max-width: 52ch;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.6;
  color: var(--ink-d-soft);
}
.statement-rule {
  margin: 56px 0 30px;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, var(--lima), transparent);
}
.statement-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 36px;
}
.statement-list li {
  font-family: 'Geist Mono', monospace;
  font-size: 13.5px;
  color: var(--ink-d-soft);
  text-transform: lowercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.statement-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lima);
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .statement { padding: 110px 24px; }
  .statement-kicker { margin-bottom: 32px; }
  .statement-rule { margin: 44px 0 26px; }
  .statement-list { gap: 14px 24px; }
}

/* ============================================================
   SOLUCIONES — flat paper section
   ============================================================ */
.soluciones {
  padding: 160px 64px;
  background: var(--bg);
  position: relative;
  /* Flat — no radius, no shadow, no border */
}

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 300px 300px;
  gap: 16px;
}
.bento-card {
  position: relative;
  border-radius: 24px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(26,26,26,0.05);
  box-shadow:
    inset 0 1px 0 var(--inner-hi),
    0 4px 6px -1px rgba(26,26,26,0.02),
    0 20px 40px -12px rgba(26,26,26,0.06);
  padding: 32px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform 240ms cubic-bezier(0.16,1,0.3,1), box-shadow 240ms cubic-bezier(0.16,1,0.3,1), border-color 240ms cubic-bezier(0.16,1,0.3,1);
  overflow: hidden;
  cursor: pointer;
}
.bento-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(420px circle at 50% 0%, rgba(91,63,255,0.08), transparent 60%);
  opacity: 0;
  transition: opacity 200ms var(--ease);
  pointer-events: none;
}
/* Holographic grid lines */
.bento-card::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(91,63,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,63,255,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0;
  transition: opacity 200ms var(--ease);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(220px circle at 50% 0%, rgba(0,0,0,0.5), transparent 70%);
  mask-image: radial-gradient(220px circle at 50% 0%, rgba(0,0,0,0.5), transparent 70%);
}
.bento-card:hover {
  transform: translateY(-6px) scale(1.005);
  box-shadow:
    inset 0 1px 0 var(--inner-hi),
    0 0 0 1px rgba(91,63,255,0.18),
    0 10px 15px -3px rgba(26,26,26,0.04),
    0 30px 60px -15px rgba(26,26,26,0.10),
    0 24px 64px rgba(91,63,255,0.06);
  border-color: rgba(91,63,255,0.18);
}
.bento-card:hover::before { opacity: 1; }
.bento-card:hover::after  { opacity: 1; }

.bento-card .top { display: flex; flex-direction: column; gap: 16px; position: relative; z-index: 1; }
.bento-card .icon {
  width: 32px; height: 32px;
  color: var(--lima-deep);
  transition: transform 380ms var(--ease);
}
.bento-card:hover .icon { transform: rotate(360deg); }
.bento-card .cat {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.bento-card h3 {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
}
.bento-card p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 36ch;
}
.bento-card .bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; position: relative; z-index: 1; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ink-soft);
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255,255,255,0.5);
}
.bento-more {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  color: var(--lima-deep);
  white-space: nowrap;
}

.bento-card.big { grid-column: span 2; }
.bento-card.tall { grid-column: span 1; grid-row: span 2; }
.bento-card.big h3 { font-size: 32px; }

/* corner pings */
.bento-card .ping {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lima);
  opacity: 0;
  transition: opacity 300ms var(--ease);
  z-index: 1;
}
.bento-card .ping.tl { top: 16px; left: 16px; }
.bento-card .ping.tr { top: 16px; right: 16px; }
.bento-card .ping.bl { bottom: 16px; left: 16px; }
.bento-card .ping.br { bottom: 16px; right: 16px; }
.bento-card:hover .ping { opacity: 0.6; }

/* ============================================================

   ============================================================ */
/* ============================================================
   SPLIT / TRANSFORMACIÓN — dark rounded block (high-impact)
   ============================================================ */
.split {
  padding: 160px 64px;
  background: var(--bg-dark);
  color: var(--ink-d);
  overflow: hidden;
  position: relative;
  border-radius: var(--dark-block-radius);
  margin: 0 var(--dark-block-margin-x);
}
.split.on-dark .section-head .right p { color: var(--ink-d-soft); }
.split-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line-d);
  position: relative;
}
.split-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--lima), transparent);
  transform: translateX(-50%);
  pointer-events: none;
}
.split-side {
  padding: 48px;
  min-height: 600px;
  display: flex; flex-direction: column; gap: 28px;
  position: relative;
}
.split-side.before {
  background: linear-gradient(180deg, #1a0a0a, #0a0a0a);
}
.split-side.after  {
  background: linear-gradient(180deg, #0a1a05, #0a0a0a);
}
.split-tag {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  color: var(--lima);
  text-transform: lowercase;
}
.before .split-tag { color: var(--coral); }
.split-side h3 {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink-d);
}
.split-list {
  list-style: none;
  display: flex; flex-direction: column; gap: 14px;
}
.split-list li {
  display: flex; align-items: flex-start; gap: 14px;
  font-size: 15px;
  color: var(--ink-d-soft);
  line-height: 1.5;
}
.split-list .marker {
  flex: 0 0 20px;
  width: 20px; height: 20px;
  margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
}
.before .marker { background: rgba(255,77,46,0.12); color: var(--coral); border: 1px solid rgba(255,77,46,0.35); }
.after  .marker { background: rgba(101,217,0,0.12); color: var(--lima); border: 1px solid rgba(101,217,0,0.35); }

.mockup {
  margin-top: auto;
  border-radius: 12px;
  border: 1px solid var(--line-d);
  background: rgba(0,0,0,0.4);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  position: relative;
}

/* ============================================================
   STACK — 3D perspective rotator
   ============================================================ */
/* ============================================================
   STACK — flat paper section
   ============================================================ */
.stack-section {
  padding: 160px 64px;
  background: var(--bg);
  position: relative;
  /* Flat — no radius, no shadow */
}

.stack-rotator-wrap {
  perspective: 1800px;
  perspective-origin: 50% 40%;
  position: relative;
  min-height: 540px;
}
.stack-domain-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 48px;
  flex-wrap: wrap;
  position: relative;
}
.stack-domain-tabs .tab {
  padding: 12px 22px;
  font-family: 'Geist Mono', monospace;
  font-size: 13px;
  color: var(--ink-soft);
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  text-transform: lowercase;
  transition: all 280ms var(--ease);
  position: relative;
}
.stack-domain-tabs .tab::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  background: var(--violet-soft);
  filter: blur(8px);
  opacity: 0;
  transition: opacity 250ms var(--ease);
  z-index: -1;
}
.stack-domain-tabs .tab:hover { color: var(--ink); border-color: rgba(91,63,255,0.4); }
.stack-domain-tabs .tab:hover::before { opacity: 1; }
.stack-domain-tabs .tab.active {
  background: var(--ink);
  color: var(--ink-d);
  border-color: var(--ink);
}
.stack-domain-tabs .tab.active::before { display: none; }

.stack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  transform-style: preserve-3d;
  transition: transform 700ms var(--ease), opacity 500ms var(--ease);
}
.stack-grid.flipping {
  transform: rotateY(8deg) scale(0.96);
  opacity: 0.2;
}
.stack-card {
  border-radius: 24px;
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(26,26,26,0.05);
  box-shadow:
    inset 0 1px 0 var(--inner-hi),
    0 4px 6px -1px rgba(26,26,26,0.02),
    0 20px 40px -12px rgba(26,26,26,0.06);
  padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
  transition: transform 400ms cubic-bezier(0.16,1,0.3,1), box-shadow 400ms cubic-bezier(0.16,1,0.3,1), border-color 400ms cubic-bezier(0.16,1,0.3,1);
  position: relative;
  overflow: hidden;
  min-height: 280px;
  animation: cardFloat 5s ease-in-out infinite;
}
@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.stack-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    inset 0 1px 0 var(--inner-hi),
    0 0 0 1px rgba(101,217,0,0.25),
    0 10px 15px -3px rgba(26,26,26,0.04),
    0 30px 60px -15px rgba(26,26,26,0.10),
    0 24px 48px rgba(101,217,0,0.06);
  border-color: rgba(101,217,0,0.25);
  animation-play-state: paused;
}
.stack-card .iso {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--bg-alt), var(--bg-cream));
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Geist Mono', monospace;
  font-weight: 600;
  color: var(--ink);
  font-size: 22px;
  box-shadow: 0 8px 24px rgba(10,10,10,0.08), inset 0 1px 0 var(--inner-hi);
  transition: transform 500ms var(--ease);
}
.stack-card:hover .iso { transform: rotate(-6deg) scale(1.05); }
.stack-card .name {
  font-size: 22px; font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.stack-card .desc {
  font-size: 14px; color: var(--ink-soft); line-height: 1.55;
}
.stack-card .meta {
  display: flex; gap: 12px; margin-top: auto;
  font-family: 'Geist Mono', monospace; font-size: 11px;
  color: var(--ink-mute);
  flex-wrap: wrap;
}
.stack-card .meta span {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  background: var(--bg-cream);
  border-radius: 4px;
}
.stack-card .badge-active {
  position: absolute; top: 18px; right: 18px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--lima-deep);
  padding: 3px 8px;
  border: 1px solid rgba(101,217,0,0.3);
  background: rgba(101,217,0,0.08);
  border-radius: 999px;
}

/* ============================================================
   PROCESO — vertical scroll-driven timeline
   ============================================================ */
/* ============================================================
   PROCESO — flat paper section
   ============================================================ */
.process {
  padding: 160px 64px;
  background: var(--bg);
  position: relative;
  /* Flat — no radius, no shadow */
}
.timeline {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 0;
}
.timeline-line {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 2px;
  background: var(--line);
  transform: translateX(-50%);
}
.timeline-fill {
  position: absolute;
  left: 50%; top: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--lima), var(--violet));
  transform: translateX(-50%);
  height: 0%;
  transition: height 200ms linear;
  border-radius: 2px;
  box-shadow: 0 0 16px var(--lima);
}
.timeline-step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  align-items: center;
  margin-bottom: 64px;
  min-height: 200px;
}
.timeline-step:nth-child(even) .ts-content { grid-column: 3; padding-left: 48px; }
.timeline-step:nth-child(even) .ts-side    { grid-column: 1; padding-right: 48px; text-align: right; }
.timeline-step:nth-child(odd)  .ts-content { grid-column: 1; padding-right: 48px; text-align: right; }
.timeline-step:nth-child(odd)  .ts-side    { grid-column: 3; padding-left: 48px; }
.ts-node {
  grid-column: 2;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--bg-alt);
  border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Geist Mono', monospace;
  font-weight: 500;
  color: var(--ink-mute);
  position: relative;
  z-index: 2;
  transition: all 400ms var(--ease);
  margin: 0 auto;
}
.timeline-step.active .ts-node {
  background: var(--lima);
  color: var(--ink);
  border-color: var(--lima-deep);
  transform: scale(1.15);
  box-shadow: 0 0 0 8px rgba(101,217,0,0.12), 0 0 32px rgba(101,217,0,0.4);
}
.ts-content h4 {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
  line-height: 1.05;
}
.ts-content p {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.55;
  max-width: 38ch;
}
.timeline-step:nth-child(odd) .ts-content p { margin-left: auto; }
.ts-side {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  color: var(--ink-mute);
  text-transform: lowercase;
  display: flex; flex-direction: column; gap: 6px;
}
.ts-side .ts-meta { font-size: 11px; color: var(--ink-faint); }
.ts-side .ts-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-cream);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  align-self: flex-start;
}
.timeline-step:nth-child(odd) .ts-side .ts-tag { align-self: flex-end; }

/* ============================================================
   FILOSOFÍA (dark)
   ============================================================ */
/* ============================================================
   FILOSOFÍA — dark rounded block (high-impact)
   ============================================================ */
.philosophy {
  background: var(--bg-dark);
  padding: 160px 64px;
  color: var(--ink-d);
  overflow: hidden;
  position: relative;
  border-radius: var(--dark-block-radius);
  margin: 0 var(--dark-block-margin-x);
}
.philosophy .section-head .left h2 { color: var(--ink-d); }
.pillars {
  display: flex; flex-direction: column;
  gap: 4px;
  margin-top: 32px;
}
.pillar {
  position: relative;
  padding: 80px 0 80px 24px;
  border-top: 1px solid var(--line-d);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
  align-items: start;
}
.pillar:last-child { border-bottom: 1px solid var(--line-d); }
.pillar-big {
  font-family: 'Geist Mono', monospace;
  font-size: clamp(96px, 12vw, 100px);
  color: var(--lima);
  opacity: 0.22;
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.pillar-content { display: flex; flex-direction: column; gap: 20px; max-width: 60ch; }
.pillar-content h3 {
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink-d);
  line-height: 1.05;
}
.pillar-content p { color: var(--ink-d-soft); line-height: 1.65; font-size: 16px; }

.ascii-logo {
  margin-top: 120px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  line-height: 1.05;
  color: var(--lima);
  opacity: 0.45;
  white-space: pre;
  overflow-x: auto;
  text-align: center;
}

/* ============================================================
   CASOS
   ============================================================ */
/* ============================================================
   CASOS — flat paper section
   ============================================================ */
.casos {
  padding: 160px 64px;
  background: var(--bg);
  position: relative;
  /* Flat — no radius, no shadow */
}
.cases-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  padding: 8px 4px 32px;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.case-card {
  flex: 0 0 480px;
  scroll-snap-align: start;
  border-radius: 24px;
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(26,26,26,0.05);
  box-shadow:
    inset 0 1px 0 var(--inner-hi),
    0 4px 6px -1px rgba(26,26,26,0.02),
    0 20px 40px -12px rgba(26,26,26,0.06);
  padding: 36px;
  display: flex; flex-direction: column; gap: 24px;
  min-height: 540px;
  transition: transform 400ms cubic-bezier(0.16,1,0.3,1), box-shadow 400ms cubic-bezier(0.16,1,0.3,1);
}
.case-card:hover {
  transform: translateY(-6px);
  box-shadow:
    inset 0 1px 0 var(--inner-hi),
    0 0 0 1px rgba(91,63,255,0.15),
    0 10px 15px -3px rgba(26,26,26,0.04),
    0 30px 60px -15px rgba(26,26,26,0.10);
}
.case-meta {
  display: flex; gap: 14px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ink-mute);
  text-transform: lowercase;
  flex-wrap: wrap;
}
.case-meta span::after { content: ' /'; margin-left: 8px; color: var(--lima-deep); }
.case-meta span:last-child::after { content: ''; margin: 0; }
.case-card h3 { font-size: 26px; font-weight: 500; letter-spacing: -0.025em; line-height: 1.2; color: var(--ink); }
.case-metric {
  font-size: clamp(40px, 4vw, 56px);
  color: var(--lima-deep);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1;
}
.case-card p { color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.case-card .chips { margin-top: auto; }
.case-foot {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  color: var(--ink-mute);
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* ============================================================
   CTA FINAL — flat paper section with ambient radial glow
   ============================================================ */
.cta-final {
  padding: 200px 64px;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  text-align: center;
  /* Flat — no radius, no shadow */
}
.cta-final::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(91,63,255,0.06), transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(101,217,0,0.08), transparent 50%);
  pointer-events: none;
}
.cta-final .pre-headline { display: flex; margin-bottom: 32px; }
.cta-final h2.display-h1 {
  font-size: clamp(64px, 11vw, 168px);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.92;
  text-wrap: balance;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}
.cta-final h2 .liquid {
  background: linear-gradient(95deg, var(--lima-deep) 0%, var(--violet) 50%, var(--coral) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: liquidFlow 6s ease-in-out infinite;
}
@keyframes liquidFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.cta-final .sub {
  max-width: 60ch;
  margin: 0 auto 56px;
  font-size: 18px;
  color: var(--ink-soft);
  line-height: 1.55;
  position: relative; z-index: 1;
}
.cta-final .btn-huge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 22px 48px;
  font-size: 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ink-d);
  font-weight: 500;
  font-family: 'Geist Mono', monospace;
  transition: all 380ms var(--ease);
  will-change: transform;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.cta-final .btn-huge::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(95deg, var(--lima) 0%, var(--violet) 100%);
  transform: translateX(-100%);
  transition: transform 600ms var(--ease);
}
.cta-final .btn-huge:hover::before { transform: translateX(0); }
.cta-final .btn-huge span { position: relative; z-index: 1; }
.cta-final .btn-huge:hover { color: var(--ink); }
.cta-final .btn-huge:hover { box-shadow: 0 24px 80px rgba(91,63,255,0.3), 0 0 0 1px rgba(91,63,255,0.3); }

.trust-badges {
  margin-top: 56px;
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative; z-index: 1;
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  color: var(--ink-soft);
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
}
.trust-badge .tb-check { color: var(--lima-deep); }

.cta-final .alt {
  margin-top: 24px;
  display: flex; flex-direction: column; gap: 6px;
  font-family: 'Geist Mono', monospace;
  font-size: 13px;
  color: var(--ink-mute);
  position: relative; z-index: 1;
}
.cta-final .alt a { color: var(--violet); }

.nodes-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.4;
}
.nodes-bg svg { width: 100%; height: 100%; }

/* ============================================================
   FOOTER
   ============================================================ */
/* ============================================================
   FOOTER — premium responsive layout
   ============================================================ */

/* Footer-top-rule hidden — footer is now a dark rounded block */
.footer-top-rule { display: none; }

footer {
  background: var(--bg-dark);
  color: var(--ink-d);
  padding: 80px 64px 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--dark-block-radius);
  margin: 0 var(--dark-block-margin-x) var(--dark-block-margin-x);
}

/* ── Main inner layout: branding left, nav right ── */
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 64px;
  max-width: 1600px;
  margin: 0 auto;
  padding-bottom: 64px;
}

/* ── Branding block ── */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 0 0 280px;
  max-width: 280px;
}
.footer-logo { color: var(--ink-d); }
.footer-tagline {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 14px;
  color: var(--ink-d-soft);
  margin: 16px 0 8px;
  line-height: 1.5;
}
.footer-location {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ink-d-mute);
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 28px;
}
.footer-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lima);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(101,217,0,0.5);
  animation: pulse 2s ease-in-out infinite;
}

/* ── Social icons ── */
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line-d);
  color: var(--ink-d-mute);
  transition: color 250ms var(--ease), border-color 250ms var(--ease), transform 250ms var(--ease);
}
.footer-social a:hover {
  color: var(--lima);
  border-color: var(--lima);
  transform: translateY(-2px);
}

/* ── Navigation columns ── */
.footer-nav {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
}
.footer-nav-col {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 140px;
}
.footer-nav-heading {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--ink-d-mute);
  text-transform: lowercase;
  letter-spacing: 0.10em;
  margin-bottom: 18px;
  font-weight: 400;
}
.footer-nav-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-nav-col a {
  font-size: 14px;
  color: var(--ink-d-soft);
  opacity: 0.72;
  transition: opacity 250ms var(--ease), color 250ms var(--ease);
}
.footer-nav-col a:hover {
  opacity: 1;
  color: var(--ink-d);
}

/* ── Copyright bar ── */
.footer-copy {
  max-width: 1600px;
  margin: 0 auto;
  padding: 24px 0 32px;
  border-top: 1px solid var(--line-d);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ink-d-faint);
  flex-wrap: wrap;
  gap: 8px;
}
.footer-copy-right { opacity: 0.6; }

/* ── ASCII watermark ── */
.footer-ascii {
  position: absolute;
  bottom: -20px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Geist Mono', monospace;
  font-size: 8px;
  line-height: 1;
  white-space: pre;
  color: var(--lima);
  opacity: 0.05;
  pointer-events: none;
}

/* ── Responsive: tablet (768px–1100px) ── */
@media (max-width: 1100px) {
  footer { padding: 64px 40px 0; }
  .footer-inner {
    flex-wrap: wrap;
    gap: 48px;
  }
  .footer-brand { flex: 0 0 100%; max-width: 100%; }
  .footer-nav { gap: 40px; }
}

/* ── Responsive: mobile (<640px) ── */
@media (max-width: 640px) {
  footer { padding: 48px 20px 0; }
  .footer-inner { gap: 40px; padding-bottom: 48px; }
  .footer-nav { flex-direction: column; gap: 32px; }
  .footer-nav-col { min-width: unset; }
  .footer-copy { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ============================================================
   EASTER EGGS — Matrix + Wireframe modes
   ============================================================ */
.matrix-mode {
  position: fixed; inset: 0;
  background: #000;
  z-index: 300;
  overflow: hidden;
  pointer-events: none;
}
.matrix-mode canvas { width: 100%; height: 100%; }
.matrix-mode .matrix-hint {
  position: absolute;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Geist Mono', monospace;
  color: #65D900;
  font-size: 13px;
  opacity: 0.7;
}

body.wireframe * {
  background: transparent !important;
  color: var(--ink) !important;
  border-color: var(--violet) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body.wireframe *::before, body.wireframe *::after { display: none !important; }
body.wireframe .bento-card,
body.wireframe .stack-card,
body.wireframe .case-card,
body.wireframe .h-win {
  border: 1px dashed var(--violet) !important;
}
body.wireframe { background: #FAFAF7 !important; }
/* Back-to-top button: keep icon visible in wireframe mode */
body.wireframe .back-to-top {
  background: var(--ink) !important;
  color: #ffffff !important;
}
body.wireframe .back-to-top svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* Section transition flash */
.section-flash {
  position: fixed; inset: 0;
  background: var(--lima);
  mix-blend-mode: difference;
  z-index: 95;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease-out;
}
.section-flash.on { opacity: 0.5; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ============================================================
   MOBILE NAV — hamburger + panel
   ============================================================ */
.nav-hamburger {
  display: none;
}

/* Mobile menu panel — hidden by default */
.mobile-menu {
  display: none;
}

@media (max-width: 1100px) {
  /* Show hamburger, hide desktop links & actions */
  .nav-links { display: none; }
  .nav-actions { display: none; }
  .nav-grid { grid-template-columns: auto 1fr; }

  /* Hamburger button */
  .nav-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 6px;
    background: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    justify-self: end;
    transition: border-color 250ms var(--ease), background 250ms var(--ease);
  }
  .nav-hamburger:hover {
    border-color: var(--lima-deep);
    background: rgba(101,217,0,0.06);
  }
  .nav-hamburger span {
    display: block;
    height: 1.5px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 350ms var(--ease), opacity 250ms var(--ease), width 250ms var(--ease);
  }
  .nav-hamburger span:nth-child(1) { width: 20px; }
  .nav-hamburger span:nth-child(2) { width: 14px; }
  .nav-hamburger span:nth-child(3) { width: 20px; }

  /* Open state — X icon */
  .nav-hamburger.open span:nth-child(1) {
    width: 20px;
    transform: translateY(6.5px) rotate(45deg);
  }
  .nav-hamburger.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .nav-hamburger.open span:nth-child(3) {
    width: 20px;
    transform: translateY(-6.5px) rotate(-45deg);
  }

  /* Mobile menu panel */
  .mobile-menu {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 99;
    background: rgba(250,250,247,0.97);
    backdrop-filter: blur(32px) saturate(200%);
    -webkit-backdrop-filter: blur(32px) saturate(200%);
    border-bottom: 1px solid var(--line);
    padding: 80px 32px 40px;
    transform: translateY(-110%);
    transition: transform 420ms var(--ease);
    pointer-events: none;
  }
  .mobile-menu.open {
    transform: translateY(0);
    pointer-events: auto;
  }

  .mobile-menu-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .mobile-link {
    font-family: 'Geist Mono', monospace;
    font-size: 15px;
    color: var(--ink-soft);
    text-transform: lowercase;
    letter-spacing: 0.02em;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 250ms var(--ease), padding-left 250ms var(--ease);
  }
  .mobile-link::before {
    content: '→';
    font-size: 12px;
    color: var(--lima-deep);
    opacity: 0;
    transition: opacity 250ms var(--ease);
  }
  .mobile-link:hover {
    color: var(--ink);
    padding-left: 6px;
  }
  .mobile-link:hover::before { opacity: 1; }
  .mobile-link:last-child { border-bottom: none; }

  /* CTA link inside mobile menu */
  .mobile-cta {
    margin-top: 20px;
    background: var(--lima);
    color: var(--ink) !important;
    padding: 16px 24px;
    border-radius: 8px;
    border-bottom: none !important;
    font-weight: 500;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(101,217,0,0.25);
  }
  .mobile-cta::before { display: none; }
  .mobile-cta:hover { padding-left: 24px; background: var(--lima-deep); }

  /* Section padding — tablet */
  section { padding: 100px 40px; }
  .soluciones { padding: 100px 40px; }
  .split { padding: 100px 40px; }
  .stack-section { padding: 100px 40px; }
  .process { padding: 100px 40px; }
  .philosophy { padding: 100px 40px; }
  .casos { padding: 100px 40px; }
  .cta-final { padding: 120px 40px; }
  footer { padding: 64px 40px 32px; }

  /* Dark block radius — slightly smaller on tablet */
  :root { --dark-block-radius: 20px; }

  .bento { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .bento-card.big, .bento-card.tall { grid-column: span 2; grid-row: auto; }
  .stack-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline-step { grid-template-columns: 56px 1fr; gap: 24px; }
  .timeline-step .ts-side { display: none; }
  .timeline-step:nth-child(even) .ts-content,
  .timeline-step:nth-child(odd) .ts-content { grid-column: 2; padding: 0; text-align: left; }
  .timeline-step:nth-child(odd) .ts-content p { margin-left: 0; }
  .ts-node { margin: 0; }
  .timeline-line, .timeline-fill { left: 28px; transform: none; }
  .metrics { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
  .metric + .metric:nth-child(3)::before { display: none; }
  .split-wrap { grid-template-columns: 1fr; }
  .split-wrap::after { left: 0; right: 0; top: 50%; bottom: auto; width: 100%; height: 2px; transform: none; background: linear-gradient(90deg, transparent, var(--lima), transparent); }
  .section-head { grid-template-columns: 1fr; }
  .hero-tr, .hero-br, .hero-windows { display: none; }
  .hero-video-frame { inset: 80px 16px 16px 16px; }
  .hero-windows { inset: 80px 16px 16px 16px; }
  .hero-tl { left: 40px; top: 96px; }
  .hero-bl { left: 40px; right: 40px; bottom: 140px; max-width: none; }
  .lost-time { left: 40px; bottom: 40px; max-width: 160px; }
  .scroll-indicator { left: auto; right: 40px; transform: none; }
}
@media (max-width: 640px) {
  /* Dark block radius — compact on mobile */
  :root { --dark-block-radius: 16px; }
  /* Hero top corners */
  .hero { border-radius: 16px 16px 0 0; }
  /* Footer bottom corners */
  footer { border-radius: 0 0 16px 16px; }

  section { padding: 80px 20px; }
  .soluciones { padding: 80px 20px; }
  .split { padding: 80px 20px; }
  .stack-section { padding: 80px 20px; }
  .process { padding: 80px 20px; }
  .philosophy { padding: 80px 20px; }
  .casos { padding: 80px 20px; }
  .cta-final { padding: 96px 20px; }
  footer { padding: 56px 20px 24px; }
  .nav { padding: 12px 20px; }
  .live-badge { display: none; }
  .bento { grid-template-columns: 1fr; }
  .bento-card.big, .bento-card.tall { grid-column: span 1; }
  .stack-grid { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr; }
  .metric + .metric::before { display: none; }
  .case-card { flex: 0 0 85%; min-height: 480px; }
  .pillar { grid-template-columns: 1fr; gap: 16px; padding-left: 0; }
  .hero-video-frame { inset: 72px 12px 12px 12px; border-radius: 16px; }
  .hero-windows { inset: 72px 12px 12px 12px; }
  .hero-tl { left: 24px; top: 84px; }
  .hero-bl { left: 24px; right: 24px; bottom: 160px; }
  .lost-time { display: none; }
  .scroll-indicator { display: none; }
  .timeline-line, .timeline-fill { left: 18px; }
  .timeline-step { grid-template-columns: 36px 1fr; }
  .ts-node { width: 36px; height: 36px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 100ms !important;
  }
  .cursor-dot, .cursor-ring, .click-ripple { display: none; }
}

/* ============================================================
   STACK TOOL MODAL
   ============================================================ */

/* Overlay — fixed inset-0, backdrop blur */
.stack-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);

  /* Hidden state */
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease);
}

/* Visible state — toggled by JS */
.stack-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* Inner card */
.stack-modal-card {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow:
    inset 0 1px 0 var(--inner-hi),
    0 40px 100px rgba(10, 10, 10, 0.28),
    0 0 0 1px rgba(91, 63, 255, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* Scale + translate entrance */
  transform: scale(0.92) translateY(16px);
  transition: transform 360ms var(--ease-spring), opacity 320ms var(--ease);
  opacity: 0;
}

.stack-modal-overlay.open .stack-modal-card {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Close button */
.stack-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-cream);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  cursor: pointer;
  z-index: 2;
  transition: background 220ms var(--ease), color 220ms var(--ease), transform 220ms var(--ease-spring);
}
.stack-modal-close:hover {
  background: var(--ink);
  color: var(--ink-d);
  transform: rotate(90deg) scale(1.08);
}

/* Header */
.stack-modal-header {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 36px 36px 28px;
  flex-shrink: 0;
}

.stack-modal-iso {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--bg-alt), var(--bg-cream));
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geist Mono', monospace;
  font-weight: 600;
  color: var(--ink);
  font-size: 24px;
  box-shadow: 0 8px 24px rgba(10, 10, 10, 0.08), inset 0 1px 0 var(--inner-hi);
}

.stack-modal-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
  padding-right: 48px; /* room for close btn */
}

.stack-modal-category {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--lima-deep);
  text-transform: lowercase;
  letter-spacing: 0.06em;
  background: rgba(101, 217, 0, 0.1);
  border: 1px solid rgba(101, 217, 0, 0.25);
  padding: 3px 10px;
  border-radius: 999px;
  align-self: flex-start;
}

.stack-modal-title {
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
}

.stack-modal-badge {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--lima-deep);
  opacity: 0.8;
}

/* Divider */
.stack-modal-divider {
  height: 1px;
  background: var(--line);
  flex-shrink: 0;
  margin: 0 36px;
}

/* Scrollable body */
.stack-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 28px 36px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.stack-modal-body::-webkit-scrollbar { width: 4px; }
.stack-modal-body::-webkit-scrollbar-track { background: transparent; }
.stack-modal-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }

/* Tags row */
.stack-modal-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.stack-modal-tags span {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ink-soft);
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-cream);
}

/* Content blocks */
.stack-modal-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stack-modal-block-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ink-mute);
  text-transform: lowercase;
  letter-spacing: 0.06em;
}
.stack-modal-block-label svg {
  color: var(--lima-deep);
  flex-shrink: 0;
}

.stack-modal-block-text {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.7;
  padding: 18px 20px;
  background: var(--bg-cream);
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  position: relative;
}
.stack-modal-block-text::before {
  content: '';
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--lima-deep);
}

/* Footer */
.stack-modal-footer {
  padding: 20px 36px 28px;
  flex-shrink: 0;
  border-top: 1px solid var(--line-soft);
}

.stack-modal-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  font-family: 'Geist Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ink-d);
  transition: background 280ms var(--ease), box-shadow 280ms var(--ease), transform 220ms var(--ease-spring);
  will-change: transform;
}
.stack-modal-cta:hover {
  background: var(--lima-deep);
  color: var(--ink);
  box-shadow: 0 8px 32px rgba(101, 217, 0, 0.3);
  transform: translateY(-2px);
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.modal-container::-webkit-scrollbar {
  display: none !important;
}

/* Ocultar barra de scroll en Firefox y IE/Edge */
html, body, .modal-container {
  -ms-overflow-style: none !important;  /* IE y Edge */
  scrollbar-width: none !important;     /* Firefox */
}
/* ---- Responsive ---- */
@media (max-width: 640px) {
  .stack-modal-overlay { padding: 16px; align-items: flex-end; }
  .stack-modal-card {
    max-height: 88vh;
    border-radius: 24px 24px 16px 16px;
    /* Slide up from bottom on mobile */
    transform: scale(1) translateY(40px);
  }
  .stack-modal-overlay.open .stack-modal-card {
    transform: scale(1) translateY(0);
  }
  .stack-modal-header { padding: 28px 24px 20px; gap: 16px; }
  .stack-modal-iso { width: 56px; height: 56px; font-size: 20px; border-radius: 14px; }
  .stack-modal-meta { padding-right: 40px; }
  .stack-modal-divider { margin: 0 24px; }
  .stack-modal-body { padding: 20px 24px; gap: 20px; }
  .stack-modal-footer { padding: 16px 24px 24px; }
  .stack-modal-cta { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .stack-modal-overlay,
  .stack-modal-card {
    transition-duration: 100ms !important;
  }
}

/* ============================================================
   GLOBAL SCROLLBAR HIDE — keep scroll functional, remove visual bar
   ============================================================ */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.stack-modal-body::-webkit-scrollbar {
  display: none !important;
}
html, body, .stack-modal-body {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* Stack cards are clickable — show pointer cursor on non-custom-cursor devices */
.stack-card {
  cursor: pointer;
}

/* ============================================================
   MICRO-INTERACTIONS — elastic hover on all interactive cards
   ============================================================ */

/* Shared elastic transition for all card types */
.stack-card,
.case-card,
.bento-card {
  transition:
    transform 400ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 400ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 400ms cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

/* Unified elastic hover lift for stack + case cards */
.stack-card:hover,
.case-card:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(26,26,26,0.12);
  box-shadow:
    inset 0 1px 0 var(--inner-hi),
    0 1px 3px rgba(26,26,26,0.02),
    0 20px 40px -15px rgba(26,26,26,0.10);
}

/* Sub-element opacity reveal on stack card hover */
.stack-card .meta span,
.stack-card .badge-active {
  opacity: 0.65;
  transition: opacity 300ms var(--ease);
}
.stack-card:hover .meta span,
.stack-card:hover .badge-active {
  opacity: 1;
}

/* Sub-element opacity reveal on case card hover */
.case-card .chips .chip {
  opacity: 0.65;
  transition: opacity 300ms var(--ease);
}
.case-card:hover .chips .chip {
  opacity: 1;
}

/* Sub-element opacity reveal on bento card hover */
.bento-card .chip {
  opacity: 0.65;
  transition: opacity 300ms var(--ease);
}
.bento-card:hover .chip {
  opacity: 1;
}

/* ============================================================
   BACK TO TOP BUTTON — floats above all blocks on the canvas
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 150; /* above everything including grain (90), nav (100) */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  border: none;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 4px 12px rgba(26,26,26,0.25),
    0 8px 24px rgba(26,26,26,0.18);
  /* Hidden by default */
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition:
    opacity 400ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 400ms cubic-bezier(0.16, 1, 0.3, 1),
    background 300ms ease,
    box-shadow 300ms ease;
}
/* Force SVG icon to always be white regardless of context */
.back-to-top svg {
  display: block;
  flex-shrink: 0;
  stroke: #ffffff;
  color: #ffffff;
  pointer-events: none;
  transition: stroke 300ms ease;
}
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--lima-deep);
  transform: translateY(-3px);
  box-shadow:
    0 6px 16px rgba(26,26,26,0.3),
    0 12px 32px rgba(26,26,26,0.2);
}
.back-to-top:hover svg {
  stroke: #0a0a0a;
  color: #0a0a0a;
}
.back-to-top:active {
  transform: scale(0.94);
}

/* Always show on touch devices — ensure it's never hidden */
@media (pointer: coarse) {
  .back-to-top {
    display: flex !important;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
  }
}

/* ============================================================
   SECURITY — user-select protection on branding & critical copy
   ============================================================ */

/* Logo, nav brand, footer brand — no drag-select */
.logo,
.footer-brand,
.footer-ascii,
.ascii-logo,
.pre-headline,
.badge-mono,
.hero-pre,
.hero-ctas,
.trust-badges,
.pillar-big,
.metric-num,
.case-metric {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* Honeypot field — completely invisible to humans */
.cf-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  tab-size: 0;
}

/* ============================================================
   CONTACT FORM
   ============================================================ */
.contact-form {
  width: 100%;
  max-width: 720px;
  margin: 56px auto 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 20px;
  padding: 40px;
  border: 1px solid rgba(26,26,26,0.06);
  box-shadow:
    0 1px 3px rgba(26,26,26,0.04),
    0 10px 30px -10px rgba(26,26,26,0.10),
    0 40px 80px -20px rgba(26,26,26,0.06);
}

.cf-row {
  display: flex;
  gap: 16px;
}
.cf-row--2 > .cf-field { flex: 1; }

.cf-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cf-label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ink-mute);
  text-transform: lowercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cf-optional {
  color: var(--ink-faint);
  font-size: 10px;
}

.cf-input {
  width: 100%;
  background: #ffffff;
  border: 1px solid rgba(26,26,26,0.10);
  border-radius: 10px;
  padding: 13px 16px;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 15px;
  color: var(--ink);
  outline: none;
  box-shadow: inset 0 2px 4px rgba(26,26,26,0.03);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.cf-input::placeholder { color: rgba(10,10,10,0.28); }
.cf-input:focus {
  border-color: var(--ink);
  box-shadow: inset 0 2px 4px rgba(26,26,26,0.03), 0 0 0 3px rgba(10,10,10,0.06);
  background: #fff;
}
.cf-input:focus::placeholder { color: rgba(10,10,10,0.38); }
.cf-input.error {
  border-color: rgba(255,77,46,0.7);
  box-shadow: inset 0 2px 4px rgba(26,26,26,0.03), 0 0 0 3px rgba(255,77,46,0.08);
}
.cf-input.success {
  border-color: rgba(101,217,0,0.6);
  box-shadow: inset 0 2px 4px rgba(26,26,26,0.03), 0 0 0 3px rgba(101,217,0,0.08);
}

.cf-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

/* CAPTCHA row */
.cf-captcha { }
.cf-captcha-question {
  font-family: 'Geist Mono', monospace;
  font-size: 15px;
  font-weight: 600;
  color: var(--lima-deep);
  letter-spacing: 0.04em;
  margin-left: 4px;
}
.cf-captcha-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.cf-captcha-input {
  max-width: 140px;
  text-align: center;
  font-family: 'Geist Mono', monospace;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.08em;
  /* hide number spinners */
  -moz-appearance: textfield;
}
.cf-captcha-input::-webkit-outer-spin-button,
.cf-captcha-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cf-captcha-refresh {
  width: 36px; height: 36px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  color: var(--ink-mute);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color 220ms var(--ease), color 220ms var(--ease), transform 300ms var(--ease);
  flex-shrink: 0;
}
.cf-captcha-refresh:hover {
  border-color: var(--lima-deep);
  color: var(--lima-deep);
  transform: rotate(180deg);
}

.cf-captcha-hint {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--ink-faint);
  text-transform: lowercase;
}

/* Status messages */
.cf-status {
  font-family: 'Geist Mono', monospace;
  font-size: 13px;
  padding: 12px 16px;
  border-radius: 8px;
  display: none;
  align-items: center;
  gap: 10px;
  line-height: 1.5;
}
.cf-status.visible { display: flex; }
.cf-status.error {
  background: rgba(255,77,46,0.08);
  border: 1px solid rgba(255,77,46,0.25);
  color: var(--coral);
}
.cf-status.success {
  background: rgba(101,217,0,0.08);
  border: 1px solid rgba(101,217,0,0.3);
  color: var(--lima-deep);
}

/* Submit button */
.cf-submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  font-family: 'Geist Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ink-d);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(26,26,26,0.18), 0 1px 3px rgba(26,26,26,0.10);
  transition: box-shadow 200ms ease, transform 200ms ease;
  will-change: transform;
  position: relative;
  overflow: hidden;
}
.cf-submit::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(95deg, var(--lima) 0%, var(--violet) 100%);
  transform: translateX(-100%);
  transition: transform 500ms var(--ease);
}
.cf-submit:hover::before { transform: translateX(0); }
.cf-submit:hover {
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(26,26,26,0.25), 0 2px 6px rgba(26,26,26,0.12);
}

/* ==========================================
   SISTEMA RESPONSIVO PREMIUM — MOBILE ≤768px
   Cubre cada sección, componente y tipografía
   del sitio COVATECH con precisión quirúrgica.
   ========================================== */
@media (max-width: 768px) {

  /* ── 1. LIENZO GLOBAL ── */
  body {
    font-size: 15px;
    line-height: 1.6;
  }

  /* ── 2. SECCIONES — padding compacto, sin scroll infinito ── */
  section,
  .impact,
  .soluciones,
  .stack-section,
  .process,
  .casos,
  .cta-final {
    padding: 56px 20px !important;
  }

  /* Bloques oscuros con border-radius — mantienen su identidad visual */
  .split,
  .philosophy {
    padding: 56px 20px !important;
    margin: 0 12px !important;
    border-radius: 20px !important;
  }

  footer {
    padding: 48px 20px 0 !important;
    margin: 0 12px 12px !important;
    border-radius: 20px !important;
  }

  /* ── 3. TIPOGRAFÍA EDITORIAL — escala fluida compacta ── */
  .display-h1 {
    font-size: clamp(32px, 9vw, 52px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.04em !important;
  }

  .display-h2 {
    font-size: clamp(26px, 7vw, 40px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em !important;
  }

  /* Hero h1 específico — más compacto aún */
  .hero h1.display-h1 {
    font-size: clamp(30px, 8.5vw, 48px) !important;
  }

  /* CTA final — título enorme reducido */
  .cta-final h2.display-h1 {
    font-size: clamp(28px, 8vw, 44px) !important;
    line-height: 1.1 !important;
  }

  /* ── 4. SECTION-HEAD — de grid 2 col a columna única ── */
  .section-head {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-bottom: 40px !important;
  }

  .section-head .right p {
    font-size: 15px !important;
    max-width: none !important;
  }

  /* ── 5. HERO — reordenado y compacto ── */
  .hero {
    min-height: 100svh !important;
  }

  .hero-video-frame {
    inset: 72px 12px 12px 12px !important;
    border-radius: 16px !important;
  }

  .hero-tl {
    top: 84px !important;
    left: 20px !important;
  }

  .hero-tr,
  .hero-br,
  .hero-windows,
  .lost-time,
  .scroll-indicator {
    display: none !important;
  }

  .hero-bl {
    left: 20px !important;
    right: 20px !important;
    bottom: 48px !important;
    gap: 16px !important;
    max-width: none !important;
  }

  .hero-sub {
    font-size: 14px !important;
    max-width: none !important;
  }

  .hero-ctas {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .hero-ctas .btn {
    padding: 14px 20px !important;
    font-size: 13px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* ── 6. IMPACTO — métricas en 2 col compactas ── */
  .impact-head {
    margin-bottom: 36px !important;
  }

  .metrics {
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
  }

  .metric {
    padding: 20px 16px !important;
    gap: 8px !important;
  }

  .metric-num {
    font-size: clamp(36px, 9vw, 52px) !important;
  }

  .metric-label {
    font-size: 11px !important;
  }

  .metric-desc {
    font-size: 10px !important;
  }

  /* ── 7. SOLUCIONES — bento en columna única ── */
  .bento {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .bento-card,
  .bento-card.big,
  .bento-card.tall {
    grid-column: unset !important;
    grid-row: unset !important;
    width: 100% !important;
    padding: 24px !important;
    border-radius: 18px !important;
    min-height: unset !important;
  }

  .bento-card h3 {
    font-size: 20px !important;
  }

  .bento-card.big h3 {
    font-size: 22px !important;
  }

  .bento-card p {
    font-size: 13px !important;
    max-width: none !important;
  }

  /* ── 8. SPLIT / ANTES-DESPUÉS — apilado vertical ── */
  .split-wrap {
    grid-template-columns: 1fr !important;
    border-radius: 16px !important;
  }

  .split-wrap::after {
    left: 0 !important;
    right: 0 !important;
    top: 50% !important;
    bottom: auto !important;
    width: 100% !important;
    height: 2px !important;
    transform: none !important;
    background: linear-gradient(90deg, transparent, var(--lima), transparent) !important;
  }

  .split-side {
    padding: 28px 20px !important;
    min-height: unset !important;
    gap: 18px !important;
  }

  .split-side h3 {
    font-size: 22px !important;
  }

  .split-list li {
    font-size: 13px !important;
  }

  .mockup {
    aspect-ratio: 16 / 7 !important;
  }

  /* ── 9. STACK — tabs scrollables, grid columna única ── */
  .stack-rotator-wrap {
    min-height: unset !important;
    perspective: none !important;
  }

  .stack-domain-tabs {
    gap: 8px !important;
    margin-bottom: 28px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .stack-domain-tabs .tab {
    padding: 8px 16px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .stack-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .stack-card {
    padding: 20px !important;
    border-radius: 16px !important;
    min-height: unset !important;
    animation: none !important;
  }

  .stack-card .iso {
    width: 48px !important;
    height: 48px !important;
    font-size: 18px !important;
    border-radius: 12px !important;
  }

  .stack-card .name {
    font-size: 18px !important;
  }

  .stack-card .desc {
    font-size: 13px !important;
  }

  /* ── 10. PROCESO — timeline lineal compacto ── */
  .timeline {
    padding: 20px 0 !important;
  }

  .timeline-line,
  .timeline-fill {
    left: 18px !important;
    transform: none !important;
  }

  .timeline-step {
    grid-template-columns: 36px 1fr !important;
    gap: 16px !important;
    margin-bottom: 36px !important;
    min-height: unset !important;
  }

  .timeline-step .ts-side { display: none !important; }

  .timeline-step:nth-child(even) .ts-content,
  .timeline-step:nth-child(odd) .ts-content {
    grid-column: 2 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .timeline-step:nth-child(odd) .ts-content p {
    margin-left: 0 !important;
  }

  .ts-node {
    width: 36px !important;
    height: 36px !important;
    font-size: 11px !important;
    margin: 0 !important;
  }

  .ts-content h4 {
    font-size: 20px !important;
    margin-bottom: 8px !important;
  }

  .ts-content p {
    font-size: 14px !important;
    max-width: none !important;
  }

  /* ── 11. FILOSOFÍA — pilares apilados ── */
  .pillars {
    margin-top: 24px !important;
    gap: 0 !important;
  }

  .pillar {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 32px 0 !important;
    padding-left: 0 !important;
  }

  .pillar-big {
    font-size: 48px !important;
    line-height: 1 !important;
    opacity: 0.18 !important;
  }

  .pillar-content h3 {
    font-size: 20px !important;
  }

  .pillar-content p {
    font-size: 14px !important;
  }

  .ascii-logo {
    display: none !important;
  }

  /* ── 12. CASOS — columna única, scroll vertical limpio ── */
  .cases-track {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 4px 0 20px !important;
    overflow-x: unset !important;
    overflow-y: unset !important;
    scroll-snap-type: none !important;
  }

  .case-card {
    flex: unset !important;
    width: 100% !important;
    padding: 24px 20px !important;
    border-radius: 20px !important;
    min-height: unset !important;
    gap: 14px !important;
    scroll-snap-align: none !important;
  }

  .case-card h3 {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  .case-metric {
    font-size: clamp(28px, 7vw, 40px) !important;
    line-height: 1 !important;
  }

  .case-card p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .case-meta {
    font-size: 10px !important;
    gap: 8px !important;
  }

  .case-card .chips {
    margin-top: 4px !important;
  }

  /* ── 13. CTA FINAL / CONTACTO ── */
  .cta-final .sub {
    font-size: 15px !important;
    margin-bottom: 32px !important;
  }

  .trust-badges {
    gap: 10px !important;
    margin-top: 28px !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .trust-badge {
    font-size: 11px !important;
    padding: 6px 14px !important;
  }

  .contact-form {
    padding: 24px 20px !important;
    border-radius: 16px !important;
    margin-top: 32px !important;
  }

  .cf-submit {
    align-self: stretch !important;
    justify-content: center !important;
  }

  /* ── 14. FOOTER ── */
  .footer-inner {
    flex-direction: column !important;
    gap: 32px !important;
    padding-bottom: 40px !important;
  }

  .footer-brand {
    flex: unset !important;
    max-width: none !important;
  }

  .footer-nav {
    flex-direction: column !important;
    gap: 28px !important;
  }

  .footer-nav-col {
    min-width: unset !important;
  }

  .footer-copy {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    padding: 20px 0 24px !important;
  }

  .footer-ascii {
    display: none !important;
  }

  /* ── 15. BACK TO TOP — dark, high-contrast, always on top ── */
  .back-to-top {
    bottom: 20px !important;
    right: 20px !important;
    width: 48px !important;
    height: 48px !important;
    background: var(--ink) !important;
    color: #ffffff !important;
    border: none !important;
    z-index: 150 !important;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
  }
  .back-to-top svg {
    stroke: #ffffff !important;
    color: #ffffff !important;
  }
  .back-to-top.visible {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  /* ── 16. NAV ── */
  .nav {
    padding: 12px 20px !important;
  }

  .live-badge {
    display: none !important;
  }
}
.cf-submit:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(26,26,26,0.15); }
.cf-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.cf-submit-label,
.cf-submit-loading { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; }
.cf-submit-loading { display: none; }
.cf-submit-loading svg { animation: spinLoader 1s linear infinite; }
@keyframes spinLoader { to { transform: rotate(360deg); } }

.cf-submit.loading .cf-submit-label  { display: none; }
.cf-submit.loading .cf-submit-loading { display: flex; }

/* Responsive */
@media (max-width: 640px) {
  .cf-row { flex-direction: column; }
  .cf-submit { align-self: stretch; justify-content: center; }
  .contact-form { margin-top: 40px; }
}
/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: #1a1a1a transparent;
}

/* Chrome, Edge, Safari - Específico para el Scroll Horizontal */
::-webkit-scrollbar:horizontal {
  height: 8px; /* Grosor de la barra */
}

::-webkit-scrollbar-track:horizontal {
  background: transparent; /* Fondo de la pista */
}

::-webkit-scrollbar-thumb:horizontal {
  background-color: #1a1a1a; /* Color de la barra (Ink/Negro) */
  border-radius: 10px; /* Bordes redondeados */
}

::-webkit-scrollbar-thumb:horizontal:hover {
  background-color: #333333; /* Color al pasar el mouse */
}

/* ============================================================
   HEADING FX — initial hidden state before JS arms them
   Prevents flash of visible text before headingFX() runs.
   ============================================================ */

/* All [data-anim] headings start invisible until JS arms them.
   Use a short transition so if JS is slow the text fades in gracefully. */
[data-anim]:not(.fx-armed) {
  opacity: 0;
  transition: opacity 400ms ease;
}

/* Fallback: si JS nunca corre, revela después de 2.8s.
   Cuando headingFX agrega fx-armed, el selector :not(.fx-armed) deja de matchear
   y el browser cancela la animación automáticamente — sin conflicto. */
@keyframes fxFallbackReveal {
  to { opacity: 1; }
}
[data-anim]:not(.fx-armed) {
  animation: fxFallbackReveal 0.5s ease 2.8s forwards;
}

/* Once armed, opacity is controlled per-animation-type below.
   Types that manage their own opacity via child elements or transitions
   need opacity:1 on the parent so children can be seen.
   Types that animate the element itself (glitch, blur, fadeup, stamp, neon)
   keep opacity:0 until fx-play is added. */
[data-anim].fx-armed:not([data-anim="glitch"]):not([data-anim="blur"]):not([data-anim="fadeup"]):not([data-anim="stamp"]):not([data-anim="neon"]) {
  opacity: 1;
}

.trabajo{
  padding:160px 64px;
  background:var(--bg);
  position:relative;
}
 
/* ── Galería tipo masonry con CSS Grid — 3 columnas, ritmo asimétrico ── */
.trabajo-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 18px;
  align-items: start;
}
 
/* —— Tile —— */
.work-tile{
  position:relative; display:flex; flex-direction:column; gap:14px;
  min-width:0;            /* permite que el tile encoja y no desborde el grid */
  opacity:1; transform:none;
  animation:workRise .6s cubic-bezier(.22,1,.36,1) both;
  /* Renderiza la tile solo cuando entra al viewport — ahorra CPU/GPU en la carga */
  content-visibility: auto;
  contain-intrinsic-size: 0 400px; /* altura estimada evita layout shifts al hacer scroll */
}
@keyframes workRise{ from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:none;} }
 
/* Spans (desktop) — ritmo irregular tipo galería */
/* Fila 1: tile grande (2 col) + tile cuadrado (1 col) */
.t-a{ grid-column: span 2; }
.t-b{ grid-column: span 1; }
/* Fila 2: cuadrado + cuadrado + cuadrado */
.t-c{ grid-column: span 1; }
.t-d{ grid-column: span 1; }
.t-e{ grid-column: span 1; }
/* Fila 3: cuadrado + grande (2 col) */
.t-f{ grid-column: span 1; }
.t-g{ grid-column: span 2; }
/* Fila 4: cuadrado + cuadrado + cuadrado */
.t-h{ grid-column: span 1; }
.t-i{ grid-column: span 1; }
 
/* —— Marco de media —— */
.work-media{
  position:relative;
  width:100%;
  max-width:100%;         /* nunca más ancho que su columna */
  min-height:200px;
  border-radius:20px;
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(255,255,255,.5),var(--bg-cream));
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--inner-hi),0 18px 40px -20px rgba(26,26,26,.18);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
/* alturas por proporción */
.ar-wide   .work-media{aspect-ratio:16/9;}
.ar-land   .work-media{aspect-ratio:4/3;}
.ar-square .work-media{aspect-ratio:1/1;}
.ar-tall   .work-media{aspect-ratio:3/4;}
 
/* media real (cuando sueltas <img>/<video>) llena el marco */
.work-media :is(img,video){
  width:100%;height:100%;object-fit:cover;display:block;
}
 
/* textura sutil dentro del marco vacío */
.work-media::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(10,10,10,.12) 1px,transparent 1px);
  background-size:22px 22px;opacity:.05;
}
.work-tile.filled .work-media::before{display:none;}
 
/* brackets de esquina — detalle editorial */
.work-media .bk{position:absolute;width:14px;height:14px;border:1.5px solid var(--ink-faint);transition:border-color .4s var(--ease);}
.work-media .bk.tl{top:14px;left:14px;border-right:0;border-bottom:0;}
.work-media .bk.tr{top:14px;right:14px;border-left:0;border-bottom:0;}
.work-media .bk.bl{bottom:14px;left:14px;border-right:0;border-top:0;}
.work-media .bk.br{bottom:14px;right:14px;border-left:0;border-top:0;}
.work-tile.filled .work-media .bk{display:none;}
 
/* estado vacío — slot honesto y diseñado */
.work-slot-idx{
  position:absolute;top:16px;right:18px;
  font-family:'Geist Mono',monospace;font-size:12px;color:var(--ink-faint);
}
.work-slot-label{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px;
  font-family:'Geist Mono',monospace;font-size:12px;color:var(--ink-mute);
  text-transform:lowercase;letter-spacing:.02em;
}
.work-slot-label .dropicon{
  width:30px;height:30px;border-radius:8px;border:1.5px dashed var(--ink-faint);
  display:flex;align-items:center;justify-content:center;color:var(--ink-mute);
  transition:border-color .4s var(--ease),color .4s var(--ease),transform .4s var(--ease);
}
.work-slot-hint{font-size:10px;color:var(--ink-faint);opacity:0;transition:opacity .35s var(--ease);}
.work-tile.filled :is(.work-slot-idx,.work-slot-label){display:none;}
 
/* badge de video */
.work-media .play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;
  background:rgba(10,10,10,.55);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;
  z-index:2;transition:transform .4s var(--ease),background .4s var(--ease);
}
.work-media .play svg{margin-left:3px;}
.work-tag{
  position:absolute;left:16px;bottom:16px;z-index:2;
  font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.04em;
  text-transform:lowercase;color:#fff;
  background:rgba(10,10,10,.55);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);
  padding:4px 9px;border-radius:999px;
}
.is-video .work-media{background:linear-gradient(135deg,#1a1a1a,#0a0a0a 60%,#241636);}
.is-video .work-slot-label,.is-video .work-slot-idx{color:rgba(255,255,255,.5);}
.is-video .work-media .bk{border-color:rgba(255,255,255,.25);}
.is-video .work-slot-label .dropicon{border-color:rgba(255,255,255,.25);color:rgba(255,255,255,.6);}
 
/* hover */
.work-tile:hover .work-media{
  transform:translateY(-5px);
  border-color:rgba(91,63,255,.28);
  box-shadow:inset 0 1px 0 var(--inner-hi),0 0 0 1px rgba(91,63,255,.14),0 28px 56px -22px rgba(26,26,26,.28);
}
.work-tile:hover .work-media .bk{border-color:var(--coral);}
.work-tile:hover .work-slot-label .dropicon{border-color:var(--lima-deep);color:var(--lima-deep);transform:translateY(-2px);}
.work-tile:hover .work-slot-hint{opacity:1;}
.work-tile:hover .work-media .play{transform:translate(-50%,-50%) scale(1.06);background:rgba(101,217,0,.9);}
.work-tile:hover .work-media .play svg{stroke:#0a0a0a;fill:#0a0a0a;}
 
/* caption */
.work-cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:0 2px;}
.work-cap-title{font-size:16px;font-weight:500;letter-spacing:-.01em;color:var(--ink);line-height:1.25;}
.work-cap-meta{font-family:'Geist Mono',monospace;font-size:11px;color:var(--ink-mute);text-transform:lowercase;white-space:nowrap;}
.work-cap-meta::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--lima-deep);margin-right:7px;vertical-align:2px;}
.work-cap-metric{margin-left:auto;font-family:'Geist Mono',monospace;font-size:11px;font-weight:500;color:var(--lima-deep);letter-spacing:-.01em;white-space:nowrap;}
 
/* nota de pie de galería */
.trabajo-note{
  margin-top:48px;font-family:'Geist Mono',monospace;font-size:12px;
  color:var(--ink-mute);display:flex;align-items:center;gap:10px;
}
.trabajo-note::before{content:'';width:24px;height:1px;background:var(--ink-faint);}
 
/* —— responsive —— */
@media(max-width:1100px){
  .trabajo{padding:100px 40px;}
  .trabajo-grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  /* Keep spans but reduce on tablet */
  .t-a{ grid-column: span 2; }
  .t-b{ grid-column: span 1; }
  .t-c,.t-d,.t-e{ grid-column: span 1; }
  .t-f{ grid-column: span 1; }
  .t-g{ grid-column: span 2; }
  .t-h,.t-i{ grid-column: span 1; }
}
@media(max-width:768px){
  .trabajo{padding:56px 20px !important;}
  /* 2-column grid on mobile — gallery feel, not single column */
  .trabajo-grid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  /* All tiles become single column on mobile */
  .t-a,.t-b,.t-c,.t-d,.t-e,.t-f,.t-g,.t-h,.t-i{
    grid-column: span 1 !important;
  }
  /* First tile gets full width for visual anchor */
  .t-a{
    grid-column: span 2 !important;
  }
  /* Uniform compact aspect ratio for all tiles on mobile */
  .ar-wide .work-media,
  .ar-land .work-media,
  .ar-square .work-media,
  .ar-tall .work-media{
    aspect-ratio: 4/3 !important;
    min-height: unset !important;
  }
  /* Slightly smaller text in captions */
  .work-cap-title{font-size:13px !important;}
  .work-cap-meta{font-size:10px !important;}
  .work-cap-metric{font-size:10px !important;}
  /* Tighter caption padding */
  .work-cap{gap:6px !important;padding:0 1px !important;}
  /* Smaller slot labels */
  .work-slot-label{font-size:10px !important;padding:12px !important;gap:6px !important;}
  .work-slot-label .dropicon{width:22px !important;height:22px !important;}
  .work-slot-idx{font-size:10px !important;}
  /* Footer note */
  .trabajo-note{font-size:11px !important;margin-top:28px !important;}
}
@media(max-width:400px){
  /* Very small phones: 2 columns still, but square ratio */
  .trabajo-grid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .t-a{ grid-column: span 2 !important; }
  .ar-wide .work-media,
  .ar-land .work-media,
  .ar-square .work-media,
  .ar-tall .work-media{aspect-ratio:1/1 !important;}
}
@media(prefers-reduced-motion:reduce){
  .work-tile{opacity:1;transform:none;transition:none;}
}

/* ── H2 FADE REVEAL — estado inicial y transición de entrada/salida ── */
h2.display-h2.h2-reveal {
  opacity: 0;
  transform: translateY(22px);
  /* will-change evita recalculos de layout durante la transición */
  will-change: opacity, transform;
  transition: opacity 0.8s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
h2.display-h2.h2-reveal.fade-in-active {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  h2.display-h2.h2-reveal { opacity: 1 !important; transform: none !important; }
}

[data-anim]{position:relative;}
.fx-word{display:inline-block;white-space:nowrap;}
.fx-sp{display:inline;}
.fx-inner{display:inline;}
 
/* RISE — letra por letra, dirección según scroll */
.fx-armed[data-anim="rise"] .fx-ch{display:inline-block;opacity:0;transform:translateY(var(--fy,.6em)) rotate(8deg);transition:opacity .5s var(--ease),transform .7s var(--ease);}
.fx-armed[data-anim="rise"].fx-from-up .fx-ch{--fy:-.6em;}
.fx-armed[data-anim="rise"].fx-from-down .fx-ch{--fy:.6em;}
.fx-armed[data-anim="rise"].fx-play .fx-ch{opacity:1;transform:none;}
 
/* WIPE — revelado con clip + barra lima que crece */
.fx-armed[data-anim="wipe"] .fx-inner{display:inline-block;clip-path:inset(0 100% 0 0);transition:clip-path .7s var(--ease);}
.fx-armed[data-anim="wipe"].fx-play .fx-inner{clip-path:inset(0 0 0 0);}
.fx-armed[data-anim="wipe"]::before{content:'';position:absolute;left:0;bottom:-.1em;height:.07em;width:100%;background:var(--lima);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease) .12s;}
.fx-armed[data-anim="wipe"].fx-play::before{transform:scaleX(1);}
 
/* TYPE — tecleo con cursor mono */
.fx-armed[data-anim="type"] .fx-inner::after{content:'▌';color:var(--lima-deep);margin-left:.04em;opacity:0;}
.fx-armed[data-anim="type"].fx-play .fx-inner::after{opacity:1;animation:fxCaret 1s steps(2) infinite;}
@keyframes fxCaret{50%{opacity:0;}}
 
/* SCRAMBLE — sin estado oculto (el JS reemplaza el texto) */
 
/* GLITCH — corte RGB */
.fx-armed[data-anim="glitch"]{opacity:0;}
.fx-armed[data-anim="glitch"].fx-play{opacity:1;animation:fxGlitch .55s steps(2,end);}
@keyframes fxGlitch{
  0%{opacity:0;transform:translate(-7px,4px) skewX(9deg);text-shadow:3px 0 var(--violet),-3px 0 var(--coral);clip-path:inset(0 0 62% 0);}
  25%{opacity:1;transform:translate(5px,-3px) skewX(-7deg);text-shadow:-3px 0 var(--violet),3px 0 var(--coral);clip-path:inset(42% 0 18% 0);}
  50%{transform:translate(-2px,1px);text-shadow:2px 0 var(--lima),-2px 0 var(--coral);clip-path:inset(8% 0 50% 0);}
  75%{transform:translate(1px,0);text-shadow:none;clip-path:inset(0);}
  100%{opacity:1;transform:none;text-shadow:none;clip-path:inset(0);}
}
 
/* BLUR — enfoque */
.fx-armed[data-anim="blur"]{opacity:0;filter:blur(16px);transform:scale(1.06) translateY(var(--fb,14px));transition:opacity .7s var(--ease),filter .7s var(--ease),transform .8s var(--ease);}
.fx-armed[data-anim="blur"].fx-from-up{--fb:-14px;}
.fx-armed[data-anim="blur"].fx-play{opacity:1;filter:blur(0);transform:none;}

/* SLIDE — deslizamiento lateral con fade */
.fx-armed[data-anim="slide"] .fx-inner{
  display:inline-block;
  opacity:0;
  transform:translateX(var(--fsx,-48px));
  transition:opacity .65s var(--ease),transform .75s var(--ease);
}
.fx-armed[data-anim="slide"].fx-from-up .fx-inner{--fsx:48px;}
.fx-armed[data-anim="slide"].fx-from-down .fx-inner{--fsx:-48px;}
.fx-armed[data-anim="slide"].fx-play .fx-inner{opacity:1;transform:translateX(0);}

/* SPLIT — cada palabra entra desde lados alternos */
.fx-armed[data-anim="split"] .fx-word{
  display:inline-block;
  opacity:0;
  transform:translateY(var(--fsy,.5em));
  transition:opacity .55s var(--ease),transform .65s var(--ease);
}
.fx-armed[data-anim="split"].fx-from-up .fx-word{--fsy:-.5em;}
.fx-armed[data-anim="split"].fx-from-down .fx-word{--fsy:.5em;}
.fx-armed[data-anim="split"].fx-play .fx-word{opacity:1;transform:translateY(0);}

/* FADE-UP — bloque completo sube con fade suave */
.fx-armed[data-anim="fadeup"]{
  opacity:0;
  transform:translateY(var(--ffu,32px));
  transition:opacity .8s var(--ease),transform .9s var(--ease);
}
.fx-armed[data-anim="fadeup"].fx-from-up{--ffu:-32px;}
.fx-armed[data-anim="fadeup"].fx-from-down{--ffu:32px;}
.fx-armed[data-anim="fadeup"].fx-play{opacity:1;transform:translateY(0);}

/* REVEAL — máscara que se abre desde el centro */
.fx-armed[data-anim="reveal"] .fx-inner{
  display:inline-block;
  clip-path:inset(0 50% 0 50%);
  transition:clip-path .75s cubic-bezier(.16,1,.3,1);
}
.fx-armed[data-anim="reveal"].fx-play .fx-inner{clip-path:inset(0 0% 0 0%);}
.fx-armed[data-anim="reveal"]::after{
  content:'';position:absolute;left:0;bottom:-.08em;
  height:.06em;width:100%;
  background:linear-gradient(90deg,var(--violet),var(--lima));
  transform:scaleX(0);transform-origin:center;
  transition:transform .6s var(--ease) .2s;
}
.fx-armed[data-anim="reveal"].fx-play::after{transform:scaleX(1);}

/* STAMP — aparece con escala + opacidad, como sello */
.fx-armed[data-anim="stamp"]{
  opacity:0;
  transform:scale(var(--fsc,1.12));
  filter:blur(4px);
  transition:opacity .6s var(--ease),transform .7s var(--ease-spring),filter .6s var(--ease);
}
.fx-armed[data-anim="stamp"].fx-from-up{--fsc:.88;}
.fx-armed[data-anim="stamp"].fx-from-down{--fsc:1.12;}
.fx-armed[data-anim="stamp"].fx-play{opacity:1;transform:scale(1);filter:blur(0);}

/* NEON — aparece con glow de color lima */
.fx-armed[data-anim="neon"]{
  opacity:0;
  text-shadow:none;
  transition:opacity .5s var(--ease),text-shadow .7s var(--ease);
}
.fx-armed[data-anim="neon"].fx-play{
  opacity:1;
  text-shadow:0 0 24px rgba(101,217,0,.55),0 0 48px rgba(101,217,0,.25);
  animation:fxNeonFade 2.2s var(--ease) forwards;
}
@keyframes fxNeonFade{
  0%{text-shadow:0 0 32px rgba(101,217,0,.8),0 0 64px rgba(101,217,0,.5);}
  100%{text-shadow:none;}
}

/* CRACK — letras caen desde arriba con rebote */
.fx-armed[data-anim="crack"] .fx-ch{
  display:inline-block;
  opacity:0;
  transform:translateY(var(--fcy,-1.2em)) scaleY(1.4);
  transition:opacity .4s var(--ease),transform .6s var(--ease-spring);
}
.fx-armed[data-anim="crack"].fx-from-up .fx-ch{--fcy:1.2em;transform:translateY(1.2em) scaleY(1.4);}
.fx-armed[data-anim="crack"].fx-play .fx-ch{opacity:1;transform:translateY(0) scaleY(1);}

@media(prefers-reduced-motion:reduce){
  .fx-armed[data-anim]{opacity:1!important;filter:none!important;transform:none!important;}
  .fx-armed[data-anim] .fx-ch{opacity:1!important;transform:none!important;}
  .fx-armed[data-anim="wipe"] .fx-inner{clip-path:none!important;}
  .fx-armed[data-anim="slide"] .fx-inner{opacity:1!important;transform:none!important;}
  .fx-armed[data-anim="split"] .fx-word{opacity:1!important;transform:none!important;}
  .fx-armed[data-anim="reveal"] .fx-inner{clip-path:inset(0 0% 0 0%)!important;}
  .fx-armed[data-anim="crack"] .fx-ch{opacity:1!important;transform:none!important;}
}
 
/* ---------- (2) BANDAS editoriales texto + media ---------- */
.band{padding:140px 64px;position:relative;scroll-margin-top:96px;background:var(--bg);}
.band-inner{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;max-width:1600px;margin:0 auto;}
.band--reverse .band-media{order:-1;}
.band-copy{display:flex;flex-direction:column;gap:26px;}
.band-steps{display:flex;flex-direction:column;gap:22px;margin-top:6px;}
.bstep{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;}
.bstep-n{font-family:'Geist Mono',monospace;font-size:13px;color:var(--lima-deep);border:1px solid var(--line);border-radius:8px;padding:6px 10px;line-height:1;align-self:start;background:var(--bg-alt);}
.bstep h4{font-size:18px;font-weight:500;letter-spacing:-.01em;margin-bottom:5px;}
.bstep p{font-size:14.5px;color:var(--ink-soft);line-height:1.55;max-width:44ch;}
.band-media .work-media{min-height:420px;border-radius:24px;}
.ar-band .work-media{aspect-ratio:4/3;}
 
/* banda oscura (radio premium, como tus bloques negros) */
.band.on-dark{background:var(--bg-dark);color:var(--ink-d);border-radius:32px;margin:0 24px;}
.band.on-dark .bstep h4{color:var(--ink-d);}
.band.on-dark .bstep p{color:var(--ink-d-soft);}
.band.on-dark .bstep-n{background:rgba(255,255,255,.04);border-color:var(--line-d);color:var(--lima);}
 
/* —— banda DEMO: marco de iPhone placeholder —— */
.demo-frame{justify-self:center;width:300px;max-width:100%;aspect-ratio:9/19;border-radius:42px;background:#0e0e0e;border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 90px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);position:relative;padding:14px;display:flex;}
.demo-frame::before{content:'';position:absolute;top:14px;left:50%;transform:translateX(-50%);width:96px;height:24px;background:#000;border-radius:0 0 16px 16px;z-index:2;}
.demo-screen{flex:1;border-radius:30px;background:linear-gradient(160deg,#161616,#0a0a0a);border:1px dashed rgba(255,255,255,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;font-family:'Geist Mono',monospace;font-size:12px;color:rgba(255,255,255,.5);text-transform:lowercase;}
.demo-screen .dropicon{width:34px;height:34px;border-radius:9px;border:1.5px dashed rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6);}
.demo-screen b{color:var(--lima);font-weight:500;}
 
@media(max-width:900px){
  .band{padding:96px 40px;}
  .band-inner{grid-template-columns:1fr;gap:40px;}
  .band--reverse .band-media{order:0;}
  .band.on-dark{margin:0 12px;border-radius:24px;}
  .band-media .work-media{min-height:300px;}
}
@media(max-width:768px){
  .band{padding:56px 20px !important;}
  .band-inner{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }
  .band--reverse .band-media{order:0 !important;}
  .band.on-dark{margin:0 12px !important;border-radius:20px !important;}
  .band-media .work-media{min-height:220px !important;border-radius:16px !important;}
  .ar-band .work-media{aspect-ratio:4/3 !important;}
  .band-copy{gap:18px !important;}
  .band-steps{gap:14px !important;}
  .bstep h4{font-size:16px !important;}
  .bstep p{font-size:13.5px !important;max-width:none !important;}
  .band .display-h2{font-size:clamp(22px,6.5vw,34px) !important;}
}
@media(max-width:640px){.band{padding:56px 20px !important;}}

/* ============================================================
   DEMO SECTION — mobile responsive overrides
   #demo-reservas uses inline styles; we override the container
   and scale the phone mockup gracefully on small screens.
   ============================================================ */
@media(max-width:768px){
  /* Demo band: tighter gap between copy and widget */
  #demo .band-inner{
    gap: 28px !important;
  }

  /* Demo widget wrapper — full width, compact padding */
  #demo-reservas{
    padding: 24px 16px !important;
    border-radius: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Phone mockup container — full width, no fixed max-width */
  #demo-reservas > div:nth-child(3){
    max-width: 100% !important;
  }

  /* Inner phone frame — tighter padding */
  #demo-reservas > div:nth-child(3) > div{
    border-radius: 28px !important;
    padding: 8px !important;
  }

  /* Chat body — shorter on mobile */
  #dr-chat-body{
    min-height: 220px !important;
    max-height: 220px !important;
  }

  /* Call view — shorter on mobile */
  #dr-view-call{
    min-height: 280px !important;
    padding: 36px 16px 16px !important;
  }

  /* CTA buttons row — tighter spacing */
  #demo-reservas > div:nth-child(4){
    gap: 8px !important;
    margin-top: 20px !important;
  }

  /* Tab buttons — slightly smaller text */
  #dr-tab-msg, #dr-tab-call{
    font-size: 12px !important;
    padding: 8px 14px !important;
  }

  /* Bottom disclaimer */
  #demo-reservas > div:last-child{
    font-size: 10px !important;
    margin-top: 12px !important;
  }
}

@media(max-width:400px){
  #demo-reservas{
    padding: 16px 12px !important;
    border-radius: 16px !important;
  }
  #dr-chat-body{
    min-height: 180px !important;
    max-height: 180px !important;
  }
  #dr-view-call{
    min-height: 240px !important;
  }
}

/* ── Filtro estético anti-IA ──────────────────────────────────────────────
   Elimina el look plástico de imágenes generadas. Fusiona blancos con el
   fondo crema del sitio (multiply) y suaviza colores saturados.
   ────────────────────────────────────────────────────────────────────── */
.work-media img,
.band-media img,
.cova-img-filter {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  border-radius: inherit;
  opacity: 0.95;
  mix-blend-mode: multiply;
  /* filter en transform-layer: el browser lo composite en GPU, no en main thread */
  filter: contrast(1.04) saturate(0.85) brightness(0.98);
  /* will-change evita re-calcular el composite en cada frame */
  will-change: auto;
}

/* Bordes redondeados: img y video respetan el border-radius de la tarjeta */
.work-media img,
.work-media video,
.band-media img,
.band-media video {
  border-radius: inherit;
}