/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg: #ffffff;
  --ink: #0a0a0a;
  --line: rgba(10, 10, 10, 0.14);
  --line-strong: rgba(10, 10, 10, 0.28);
  --fg-dim: #55534f;

  /* Acento delicado — solo para detalles: foco, selección, bordes sutiles,
     franjas del marquee. Nunca reemplaza el blanco/negro como base. */
  --accent: #8c3ffe;
  --accent-soft: rgba(140, 63, 254, 0.35);
  --accent-faint: rgba(140, 63, 254, 0.16);
  /* Negro con un dejo de violeta — reemplaza al negro puro en estados hover
     de tarjetas, para que la inversión de color no se sienta 100% blanco y
     negro. */
  --ink-violet: #150c22;

  --display: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* Tipografía delicada para detalles pequeños (flourishes, no cuerpo de texto).
     El cliente pidió "Del Rose Regular", pero es una fuente DEMO de uso
     personal (requiere licencia comercial no adquirida) — se usa en su lugar
     Cormorant Garamond itálica, de licencia libre (Google Fonts, OFL), con un
     espíritu muy similar: serif delicada de alto contraste. */
  --script: "Cormorant Garamond", "Georgia", serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --container: 1320px;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; }
html.intro-active { overflow: hidden; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
  cursor: default;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1; letter-spacing: -0.01em; }
::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* =============================================================
   3. Utilities
   ============================================================= */
.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .6rem 1rem; background: var(--ink); color: var(--bg);
  z-index: 9999; font-weight: 600; font-family: var(--mono);
}
.skip-link:focus { top: 1rem; }

.board-noise {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .025; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.coord-follower {
  position: fixed;
  top: 0; left: 0;
  z-index: 9998;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  background: var(--ink);
  color: var(--bg);
  padding: .15rem .4rem;
  transform: translate(-1000px, -1000px);
  pointer-events: none;
  transition: transform .05s linear;
}

.reveal[data-pending] {
  animation: revealUp .7s var(--ease-out) both;
}
@keyframes revealUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Scroll-triggered reveal — used below the hero (headings, ledes, cards)
   instead of firing on load, so the page reads as something that responds
   to scrolling rather than everything already sitting there. JS
   (initScrollReveal) adds .is-inview via IntersectionObserver, staggering
   siblings within the same parent; a safety-net timeout and the
   reduced-motion override below both guarantee content is never stuck
   invisible. */
.reveal-io {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal-io.is-inview {
  opacity: 1;
  transform: none;
}

/* =============================================================
   4. Typography
   ============================================================= */
.kicker {
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.section-heading {
  position: relative;
  font-family: var(--mono);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.section-heading::before {
  content: "";
  display: inline-block;
  width: .6em;
  height: 2px;
  background: var(--accent);
  transform: rotate(-40deg);
  flex-shrink: 0;
}
/* Underline that draws in (left to right) once the heading scrolls into
   view — piggybacks on the same .is-inview class the scroll-reveal system
   (initScrollReveal) adds, so both animate together. */
.section-heading::after {
  content: "";
  position: absolute;
  left: 0; bottom: -.55rem;
  width: 100%;
  max-width: 240px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s var(--ease-out) .15s;
}
.section-heading.is-inview::after { transform: scaleX(1); }
.section-lede {
  color: var(--fg-dim);
  max-width: 56ch;
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  margin-bottom: 3rem;
}

/* =============================================================
   5. Components
   ============================================================= */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.5rem .95rem 1.7rem;
  font-family: var(--mono);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  /* Diagonal-cut corner — echoes the corner accents on the piece/work cards
     and the diagonal deco-lines instead of a plain rectangle. */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  overflow: hidden;
  isolation: isolate;
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out);
  z-index: -1;
}
.btn:hover::before { transform: scaleX(1); }
.btn-arrow { display: inline-block; transition: transform .3s var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(5px); }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { color: #fff; border-color: var(--accent); }
.btn-ghost { background: var(--bg); color: var(--ink); }
.btn-ghost:hover { color: #fff; border-color: var(--accent); }

/* 12-col grid, hairlines via gap trick */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  min-width: 0;
}
.grid-12 > * { background: var(--bg); padding: 2rem; min-width: 0; }
.col-span-4 { grid-column: span 12; }
.col-span-8 { grid-column: span 12; }
.col-span-12 { grid-column: span 12; }

/* Reusable decorative diagonal-line SVGs — the "transversal lines" motif that
   recurs across sections instead of just the literal board grid. Color reads
   light-on-dark in the hero, dark-on-light everywhere else. */
.deco-lines {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.deco-lines path {
  fill: none;
  stroke-width: 1.5;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: drawPath 2.6s var(--ease-out) forwards;
}
.deco-lines .line-accent { animation-delay: .35s; }
@keyframes drawPath { to { stroke-dashoffset: 0; } }
/* Light sections (Paquetes, Contacto): dark ink line + violet accent line. */
.deco-lines--packages .line-ink,
.deco-lines--contact .line-ink { stroke: var(--line-strong); }
.deco-lines--packages .line-accent,
.deco-lines--contact .line-accent { stroke: var(--accent-soft); }
/* Dark sections (Hero): white line + full-strength violet accent line. */
.deco-lines--hero .line-ink { stroke: rgba(255, 255, 255, .3); }
.deco-lines--hero .line-accent { stroke: var(--accent); opacity: .85; }

/* =============================================================
   6. Sections
   ============================================================= */

/* --- Intro / splash --- */
.intro {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--ink);
  opacity: 1;
  transition: opacity .6s var(--ease-out);
}
.intro:not([hidden]) { display: block; }
.intro.is-leaving { opacity: 0; pointer-events: none; }
.intro-enter {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.5rem;
  text-align: center;
  color: #fff;
  padding: 2rem;
}
.intro-logo-wrap {
  position: relative;
  width: min(58vw, 300px);
  aspect-ratio: 0.7008;
}
.intro-canvas-3d,
.intro-canvas,
.intro-logo-real {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.intro-canvas { transition: opacity .45s var(--ease-out); }
.intro-canvas.is-fading { opacity: 0; }
/* WebGL canvas for the 3D logo intro (intro-3d.js). Sits above the 2D
   particle canvas in the DOM but only one of the two is ever actually
   driven — see window.__e4Intro in main.js. */
.intro-canvas-3d { transition: opacity .5s var(--ease-out); }
.intro-canvas-3d.is-fading { opacity: 0; }
.intro-logo-real {
  object-fit: contain;
  opacity: 0;
  transition: opacity .5s var(--ease-out);
  /* The source icon is black line-art on a transparent background — over
     the intro's black backdrop that read as a faint, muddy grey silhouette
     instead of clean black/white. Force it to pure white so it stands out
     crisply against the black background: real black + real white, no
     grey mid-tones. */
  filter: brightness(0) invert(1);
}
.intro-logo-real.is-visible { opacity: 1; }
/* Glow that blooms in behind the logo once the particles have settled into
   its shape — a soft, dim radial white halo, pulsing gently. Kept
   black-and-white (no violet tint) per the client's request: the intro logo
   itself should read as pure black/white, not branded violet. */
.intro-halo {
  position: absolute;
  inset: -25%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .08) 45%, transparent 70%);
  filter: blur(14px);
  opacity: 0;
  transition: opacity .6s var(--ease-out);
  pointer-events: none;
}
.intro-halo.is-visible { opacity: 1; animation: haloPulse 2.6s ease-in-out infinite; }
@keyframes haloPulse {
  0%, 100% { transform: scale(1); opacity: .55; }
  50% { transform: scale(1.04); opacity: .75; }
}
.intro-tagline {
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-top: -.75rem;
}
.intro-sub {
  font-family: var(--script);
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(255,255,255,.7);
  letter-spacing: .01em;
}

/* --- Page curtain (anchor-nav transition) --- */
/* A violet wipe that briefly covers the screen when jumping between
   sections via an in-page anchor link — masks the scroll jump so it reads
   as a deliberate transition instead of a jump cut. Idle just off-screen
   below; JS (initSmoothAnchors) slides it up to cover, jumps the scroll
   position while hidden, then continues the same upward sweep off the top
   to reveal the destination already in place. */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: linear-gradient(135deg, var(--accent), var(--ink-violet));
  transform: translateY(100%);
  transition: transform .48s var(--ease-out);
  pointer-events: none;
}
.curtain.is-covering { transform: translateY(0); }
.curtain.is-revealing {
  transform: translateY(-100%);
  transition: transform .5s var(--ease-in);
}

/* --- Scroll progress --- */
/* Thin violet-gradient line pinned to the very top of the viewport, above
   the masthead, that fills left-to-right with how far down the page the
   visitor has scrolled. */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 20;
  background: rgba(10, 10, 10, .08);
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
  transform-origin: 0 0;
  transform: scaleX(0);
  transition: transform .08s linear;
}

/* --- Masthead --- */
.masthead {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem var(--gutter);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .7);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.masthead-brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .02em;
}
.masthead-logo { width: 28px; height: 28px; object-fit: contain; }
.masthead-brand-dot { color: var(--accent); }
.masthead-nav { display: none; align-items: center; gap: 2rem; font-family: var(--mono); font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
.masthead-nav a { position: relative; padding-bottom: 2px; }
.masthead-nav a:not(.masthead-cta)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--ink); transition: right .25s var(--ease-out);
}
.masthead-nav a:not(.masthead-cta):hover::after { right: 0; }
.masthead-cta { border: 1px solid var(--ink); padding: .5rem 1rem; transition: background .2s, color .2s; }
.masthead-cta:hover { background: var(--ink); color: var(--bg); }
.masthead-toggle { display: flex; flex-direction: column; gap: 5px; padding: .5rem; }
.masthead-toggle span { width: 22px; height: 2px; background: var(--ink); }

.mobile-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 9;
  background: var(--bg); border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column;
  transform: translateY(-100%);
  transition: transform .3s var(--ease-out);
  padding: 6rem var(--gutter) 2rem;
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .03em;
}
.mobile-nav.is-open { transform: translateY(0); }
.mobile-nav a { padding: 1rem 0; border-bottom: 1px solid var(--line); }

/* --- Hero --- */
.hero {
  padding: clamp(2rem, 6vw, 4rem) var(--gutter);
  position: relative;
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; background: var(--ink); overflow: hidden; }
.hero-bg video { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
/* Fine film-grain texture over the dark hero — a static SVG turbulence
   overlay (no JS, no motion) that keeps the video/scrim from reading flat. */
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.6) 0%, rgba(10,10,10,.72) 55%, rgba(10,10,10,.88) 100%);
}
.deco-lines--hero {
  inset: 0;
  width: 100%; height: 100%;
  opacity: .55;
}
.hero-grid {
  position: relative;
  z-index: 1;
  background: transparent;
  border: 0;
  gap: 0 2.5rem;
}
.hero-grid > * { background: transparent; padding: 0; }
.hero .kicker { color: rgba(255,255,255,.65); }
.hero-main { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.hero-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 4.4vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
  max-width: 16ch;
}
.hero-word-wrap { display: inline-block; white-space: nowrap; }
.hero-letter {
  --from-x: 0px;
  display: inline-block;
  opacity: 0;
  transform: translateX(var(--from-x)) translateY(0.15em);
  animation: letterIn .75s var(--ease-out) forwards;
}
@keyframes letterIn { to { opacity: 1; transform: translateX(0) translateY(0); } }
/* Same fly-in-from-the-sides treatment, scaled down, on the masthead nav
   links (Servicios, Trabajos, Empezar partida) — see wrapFlyLetters() /
   initNavLetters() in main.js. Reuses the hero title's letterIn keyframe. */
.nav-word-wrap { display: inline-block; white-space: nowrap; }
.nav-letter {
  --from-x: 0px;
  display: inline-block;
  opacity: 0;
  transform: translateX(var(--from-x)) translateY(0.15em);
  animation: letterIn .55s var(--ease-out) forwards;
}
.hero-side { display: flex; flex-direction: column; gap: 1.5rem; }
.hero-lede { color: rgba(255,255,255,.78); font-size: 1.05rem; max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero-actions .btn-primary { background: #fff; color: var(--ink); border-color: #fff; }
.hero-actions .btn-ghost { background: transparent; color: #fff; border-color: #fff; }
/* Both use the base .btn hover (violet sweep + accent border), which reads
   fine over either resting variant here. */
@media (min-width: 720px) {
  .hero-side { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 2.5rem; }
}

/* --- Marquee --- */
.marquee {
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  overflow: hidden;
  padding: 1rem 0;
  margin-top: clamp(2rem, 6vw, 4rem);
}
.marquee-track {
  display: flex;
  gap: 1.5rem;
  white-space: nowrap;
  width: max-content;
  animation: marquee 22s linear infinite;
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(1rem, 2vw, 1.4rem);
  letter-spacing: .02em;
  text-transform: uppercase;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- Packages (Elegí tu jugada) --- */
.packages { padding: clamp(4rem, 9vw, 7rem) var(--gutter); position: relative; z-index: 1; overflow: hidden; }
/* A soft ambient violet wash on the otherwise-white sections — barely-there
   color so the page doesn't read as pure black/white/grey even where the
   deco-lines and cards don't reach. */
.packages::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 60% 55% at 88% -5%, rgba(140, 63, 254, .07), transparent 65%);
  pointer-events: none;
}
.deco-lines--packages {
  top: -5%; right: -5%;
  width: min(46vw, 620px);
  height: auto;
  opacity: .5;
}
.packages-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.package-card {
  background: var(--bg);
  padding: 2rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--accent-faint);
  /* Tilt (--rx/--ry, set by initCardTilt on fine-pointer devices) and the
     hover lift (--card-lift) both fold into one transform so they animate
     together instead of fighting each other. */
  --rx: 0deg; --ry: 0deg; --card-lift: 0px;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--card-lift));
  transition: background .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.package-card::after {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 26px 26px 0;
  border-color: transparent var(--accent-faint) transparent transparent;
  transition: border-color .25s var(--ease-out);
}
.package-card:hover {
  background: var(--ink-violet); color: var(--bg); border-top-color: var(--accent);
  --card-lift: -4px;
  box-shadow: 0 26px 46px -18px rgba(140, 63, 254, .38), 0 0 0 1px rgba(140, 63, 254, .22);
}
.package-card:hover::after { border-color: transparent var(--accent) transparent transparent; }
.package-coord {
  position: absolute; top: 1.25rem; right: 1.5rem;
  font-family: var(--mono); font-size: .75rem; color: var(--accent);
}
.package-card:hover .package-coord { color: var(--bg); opacity: .6; }
.package-tag {
  display: block;
  font-family: var(--mono);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-dim);
  margin-bottom: 1rem;
}
.package-card:hover .package-tag { color: var(--bg); opacity: .75; }
.package-price { margin-bottom: .75rem; }
.package-price-amount {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.01em;
}
.package-desc { font-size: .95rem; max-width: 42ch; margin-bottom: 1.5rem; }
.package-card:hover .package-desc { color: var(--bg); }
.package-cta-wrap { margin-top: auto; }
.package-cta { width: 100%; }
.package-card:hover .package-cta { border-color: var(--bg); color: var(--bg); }
.package-card:hover .package-cta:hover { color: var(--ink); }

/* Shared "próximamente" note under any Ver demo button (packages + demos) —
   revealed by initDemoButtons() on click instead of pretending a real demo
   exists yet. */
.demo-note {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--fg-dim);
  margin-top: .75rem;
  line-height: 1.5;
}
.package-card:hover .demo-note { color: rgba(255,255,255,.7); }
.demo-note a { color: var(--accent); border-bottom: 1px solid currentColor; }
.package-card:hover .demo-note a { color: #fff; }

/* --- Bundle banner (hosting + dominio) --- */
.bundle-banner {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: 1.75rem 2rem;
  border: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.bundle-banner-kicker {
  font-family: var(--mono);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
}
.bundle-banner-text { font-size: 1.02rem; max-width: 62ch; }
.bundle-banner-text strong { font-weight: 800; }

/* --- Help choose (¿No sabés cuál elegir?) --- */
.help-choose {
  margin-top: clamp(2rem, 4vw, 2.5rem);
  padding: 2rem;
  border: 1px dashed var(--line-strong);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.help-choose-title { font-family: var(--display); font-weight: 800; font-size: 1.2rem; text-transform: uppercase; margin-bottom: .35rem; }
.help-choose-text { color: var(--fg-dim); max-width: 42ch; }

/* --- Demos (Mirá cómo podría verse tu negocio) --- */
.demos { padding: clamp(4rem, 9vw, 7rem) var(--gutter); background: var(--ink-violet); color: var(--bg); position: relative; z-index: 1; overflow: hidden; }
.demos .section-lede { color: rgba(255,255,255,.6); }
.constellation-canvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  opacity: .6;
}
/* Same static grain as the hero, layered above the constellation canvas —
   keeps the two dark sections feeling like one consistent material. */
.demos::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
.demos .section-heading, .demos .section-lede, .demos-grid { position: relative; z-index: 1; }
.demos-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line-strong); border: 1px solid var(--line-strong); }
.demo-card {
  background: var(--ink-violet);
  padding: 2rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--accent-faint);
  --rx: 0deg; --ry: 0deg; --card-lift: 0px;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--card-lift));
  transition: background .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.demo-card::after {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 26px 26px 0;
  border-color: transparent var(--accent-faint) transparent transparent;
  transition: border-color .25s var(--ease-out);
}
.demo-card:hover {
  background: var(--bg); color: var(--ink); border-top-color: var(--accent);
  --card-lift: -4px;
  box-shadow: 0 26px 46px -18px rgba(140, 63, 254, .3), 0 0 0 1px rgba(140, 63, 254, .2);
}
.demo-card:hover::after { border-color: transparent var(--accent) transparent transparent; }
.demo-card-cat {
  display: block; font-family: var(--mono); font-size: .75rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--accent); margin-bottom: .75rem;
}
.demo-card:hover .demo-card-cat { color: var(--fg-dim); }
.demo-card-title { font-family: var(--display); font-weight: 800; font-size: 1.4rem; text-transform: uppercase; margin-bottom: .75rem; }
.demo-card-desc { font-size: .95rem; max-width: 46ch; color: rgba(255,255,255,.8); margin-bottom: 1.5rem; }
.demo-card:hover .demo-card-desc { color: var(--fg-dim); }
.demo-cta-wrap { margin-top: auto; }
.demo-trigger { width: 100%; }
.demo-card .demo-note { color: rgba(255,255,255,.6); }
.demo-card:hover .demo-note { color: var(--fg-dim); }
.demo-card .demo-note a { color: var(--accent); }
.demo-card:hover .demo-note a { color: var(--accent); }

/* --- Steps (¿Cómo se juega?) --- */
.steps { padding: clamp(4rem, 9vw, 7rem) var(--gutter); position: relative; z-index: 1; overflow: hidden; }
.steps::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 55% 55% at 8% -5%, rgba(140, 63, 254, .06), transparent 65%);
  pointer-events: none;
}
.steps-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-top: 1rem;
}
.step-item { position: relative; padding-top: 1.25rem; border-top: 2px solid var(--accent-faint); }
.step-num {
  display: block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--accent);
  margin-bottom: .75rem;
}
.step-title { font-family: var(--display); font-weight: 800; font-size: 1.1rem; text-transform: uppercase; margin-bottom: .5rem; }
.step-desc { font-size: .92rem; color: var(--fg-dim); max-width: 32ch; }

/* --- Contact --- */
.contact { padding: clamp(4rem, 9vw, 7rem) var(--gutter) clamp(5rem, 10vw, 8rem); border-top: 1px solid var(--ink); position: relative; z-index: 1; overflow: hidden; }
.contact::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 55% 60% at 8% 110%, rgba(140, 63, 254, .08), transparent 65%);
  pointer-events: none;
}
.deco-lines--contact {
  bottom: -8%; right: -4%;
  width: min(40vw, 540px);
  height: auto;
  opacity: .4;
}
.contact-lede { color: var(--fg-dim); max-width: 52ch; margin-bottom: 2rem; }
.contact-cta { margin-bottom: 2rem; }
.contact-email {
  display: block;
  max-width: 100%;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.15rem, 5vw, 3rem);
  text-transform: lowercase;
  border-bottom: 2px solid var(--accent);
  padding-bottom: .1em;
  transition: opacity .2s var(--ease-out), border-color .2s var(--ease-out);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.contact-email:hover { opacity: .7; border-color: var(--ink); }
.contact-note { font-family: var(--mono); font-size: .8rem; color: var(--fg-dim); margin-top: 1.5rem; }

/* --- Footer --- */
.site-footer {
  padding: 2rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  font-size: .8rem;
  color: var(--fg-dim);
  font-family: var(--mono);
  border-top: 1px solid var(--line);
}

/* --- Asistente E4 (chat de IA) --- */
.e4-chat {
  position: fixed;
  right: clamp(1rem, 3vw, var(--gutter));
  bottom: clamp(1rem, 3vw, var(--gutter));
  z-index: 500;
}
.e4-chat-toggle {
  font-family: var(--mono);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  padding: .85rem 1.2rem;
  transition: background .15s var(--ease-out), color .15s var(--ease-out);
}
.e4-chat-toggle:hover { background: #fff; color: var(--ink); }
.e4-chat.is-open .e4-chat-toggle { background: var(--accent); border-color: var(--accent); color: #fff; }
.e4-chat-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + .75rem);
  width: min(360px, calc(100vw - 2rem));
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--ink);
}
.e4-chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1rem;
  background: var(--ink); color: #fff;
  font-family: var(--mono); text-transform: uppercase; font-size: .78rem; letter-spacing: .04em;
  flex-shrink: 0;
}
.e4-chat-close { font-size: 1.3rem; line-height: 1; color: #fff; }
.e4-chat-body {
  flex: 1; overflow-y: auto; min-height: 120px;
  padding: 1rem; display: flex; flex-direction: column; gap: .6rem;
  font-size: .88rem; line-height: 1.45;
}
.e4-chat-msg { padding: .6rem .75rem; border: 1px solid var(--line); max-width: 88%; }
.e4-chat-msg-bot { align-self: flex-start; background: var(--bg); }
.e4-chat-msg-user { align-self: flex-end; background: var(--ink); color: #fff; border-color: var(--ink); }
.e4-chat-msg-pending { opacity: .55; }
.e4-chat-suggestions { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem .75rem; flex-shrink: 0; }
.e4-chat-suggestions[hidden] { display: none; }
.e4-chat-chip {
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .02em;
  border: 1px solid var(--line-strong); background: transparent; padding: .4rem .55rem;
  transition: background .15s var(--ease-out), color .15s var(--ease-out);
}
.e4-chat-chip:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.e4-chat-form { display: flex; border-top: 1px solid var(--line); flex-shrink: 0; }
.e4-chat-input { flex: 1; border: 0; padding: .8rem .9rem; font: inherit; font-size: .88rem; background: transparent; color: var(--ink); }
.e4-chat-input:focus { outline: none; }
.e4-chat-send { border: 0; background: var(--accent); color: #fff; width: 3rem; font-size: 1.05rem; flex-shrink: 0; }
.e4-chat-send:hover { opacity: .85; }
@media (max-width: 480px) {
  .e4-chat-panel { width: calc(100vw - 2rem); }
}
.back-to-top:hover { color: var(--ink); }

/* =============================================================
   7. Effects
   ============================================================= */

/* =============================================================
   8. Responsive
   ============================================================= */
@media (min-width: 720px) {
  .col-span-8 { grid-column: span 8; }
  .col-span-4 { grid-column: span 4; }
  .packages-grid { grid-template-columns: repeat(2, 1fr); }
  .demos-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .packages-grid { grid-template-columns: repeat(3, 1fr); }
  .demos-grid { grid-template-columns: repeat(3, 1fr); }
  .steps-list { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 960px) {
  .masthead-nav { display: flex; }
  .masthead-toggle { display: none; }
  .mobile-nav { display: none; }
}

/* =============================================================
   9. Reduced motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .reveal[data-pending] { animation: none; opacity: 1; transform: none; }
  .marquee-track { animation: none; }
  .coord-follower { display: none; }
  .intro, .intro.is-leaving { transition: none; }
  .hero-letter { animation: none; opacity: 1; transform: none; }
  .deco-lines path { animation: none; stroke-dashoffset: 0; }
  .constellation-canvas { display: none; }
  .hero-bg video { transform: none !important; }
  .intro-halo.is-visible { animation: none; }
  .reveal-io { opacity: 1 !important; transform: none !important; transition: none !important; }
  .section-heading::after { transition: none; transform: scaleX(1); }
  .package-card, .demo-card { transition: background .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out); }
  .curtain { display: none; }
  .scroll-progress span { transition: none; }
  /* Belt-and-suspenders: intro-3d.js already refuses to run under reduced
     motion (window.__e4Intro.claim() returns false), but this guarantees
     the WebGL canvas never renders even if some future path forgets to
     check that. */
  .intro-canvas-3d { display: none; }
}