/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg: #14110F;
  --bg-2: #1F1B17;
  --bronze: #C9974A;
  --bronze-dim: #A87C3A;
  --jade: #2F4F44;
  --jade-bright: #46705F;
  --cream: #EDE6DA;
  --mute: #9C9187;
  --line: rgba(237, 230, 218, 0.12);

  --serif: "Fraunces", "Georgia", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Stronger curves — punchier than the CSS built-ins (emil-design-eng) */
  --ease-ui: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-move: cubic-bezier(0.77, 0, 0.175, 1);

  --nav-h: 76px;
}

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

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

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

/* Persistent photo backdrop — the same desk photo from the hero stays
   fixed behind the entire site, dimmed by a heavy scrim so every
   section's text keeps AA contrast regardless of what's behind it.
   Sits behind the 3D card scene (z -1) and body's own solid --bg. */
.site-bg {
  position: fixed; inset: 0; z-index: -3;
  overflow: hidden;
}
.site-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Same calibrated focal point as the hero photo (34%/41%) — keeps
     the monitor+silhouette anchor consistent as the ambient backdrop
     for every section. */
  object-position: 34% 41%;
  transform: scale(1.06);
  animation: siteBgDrift 44s ease-in-out infinite;
}
@keyframes siteBgDrift {
  0%, 100% { transform: scale(1.06); }
  50%      { transform: scale(1.13); }
}
@media (prefers-reduced-motion: reduce) {
  .site-bg img { animation: none; }
}
.site-bg-scrim {
  position: fixed; inset: 0; z-index: -2;
  background: linear-gradient(180deg,
    rgba(20,17,15,.93) 0%, rgba(20,17,15,.88) 35%,
    rgba(20,17,15,.9) 70%, rgba(20,17,15,.96) 100%);
  pointer-events: none;
}

.container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
@media (min-width: 720px) { .container { padding-inline: 2.5rem; } }
@media (min-width: 1280px) { .container { padding-inline: 3rem; } }

.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bronze);
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--bronze);
}

.section {
  padding-block: clamp(4rem, 9vw, 8rem);
  position: relative;
  background: transparent; /* the persistent photo backdrop shows through */
}
.section-head {
  max-width: 640px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-title {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
}
.section-title em { color: var(--bronze); font-style: italic; }

/* =============================================================
   4. Reveal (defensive) — scale+opacity, never from scale(0)
   ============================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  transition: opacity .7s var(--ease-ui), transform .7s var(--ease-ui);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }

/* Stagger cadence for grouped reveals (30-80ms cascade, emil-design-eng) */
.includes-grid [data-reveal]:nth-child(1) { --reveal-delay: 0s; }
.includes-grid [data-reveal]:nth-child(2) { --reveal-delay: .06s; }
.includes-grid [data-reveal]:nth-child(3) { --reveal-delay: .12s; }
.includes-grid [data-reveal]:nth-child(4) { --reveal-delay: .18s; }
.includes-grid [data-reveal]:nth-child(5) { --reveal-delay: .24s; }
.includes-grid [data-reveal]:nth-child(6) { --reveal-delay: .3s; }
.process-item:nth-child(1) { --reveal-delay: 0s; }
.process-item:nth-child(2) { --reveal-delay: .06s; }
.process-item:nth-child(3) { --reveal-delay: .12s; }
.process-item:nth-child(4) { --reveal-delay: .18s; }

/* =============================================================
   5. Components
   ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem 1.7rem;
  border-radius: 100px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .95rem;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  transition: transform .3s var(--ease-ui), box-shadow .3s var(--ease-ui), background-color .3s var(--ease-out);
}
.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(0,0,0,0.32), 0 8px 18px rgba(201,151,74,0.22);
}
/* Instant press feedback — apple-design / emil-design-eng: respond on press, not release */
.btn:active {
  transform: translateY(-1px) scale(0.97);
  transition-duration: .1s;
}

.btn-primary {
  background: var(--bronze);
  color: #1a1510;
}
.btn-primary:hover { background: #d6a458; }

.btn-ghost {
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--bronze); color: var(--bronze); }

.btn-sm { padding: .7rem 1.3rem; font-size: .85rem; }

.card {
  background: rgba(31, 27, 23, 0.82);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 2rem;
}

/* Mouse-tracked 3D tilt (CSS transforms — apple-design / emil-design-eng) */
[data-tilt] {
  --rx: 0deg; --ry: 0deg;
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform .5s var(--ease-ui), box-shadow .4s var(--ease-ui), border-color .4s var(--ease-ui);
  will-change: transform;
}
[data-tilt]:hover {
  transition-duration: .12s;
  border-color: rgba(201,151,74,0.45);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55), 0 0 40px -8px rgba(201,151,74,0.25);
}

/* =============================================================
   6. Nav
   ============================================================= */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background-color .4s var(--ease-out), backdrop-filter .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(20, 17, 15, 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nav-logo {
  display: flex;
  align-items: center;
}
.nav-logo img {
  height: clamp(38px, 5vw, 48px);
  width: auto;
}

/* =============================================================
   7. Cinematic 3D background scene (persistent, signature effect)
   ============================================================= */
[data-scene-canvas] {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Mobile equivalent of the WebGL cluster — same bronze/jade/cream
   floating panels, pure CSS keyframe animation (compositor-only, no JS
   per frame) instead of a WebGL render loop. See main.js initSceneCSS. */
[data-scene-css] {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  perspective: 900px;
}
.ambient-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 118px;
  height: 172px;
  border-radius: 10px;
  opacity: .55;
  box-shadow: 0 30px 55px -22px rgba(0, 0, 0, 0.65);
  will-change: transform;
}
.ambient-card-0 {
  background: linear-gradient(135deg, #e3b56c 0%, var(--bronze) 55%, #7d5a26 100%);
  animation: ambientFloat0 9s ease-in-out infinite;
}
.ambient-card-1 {
  background: linear-gradient(135deg, #4f8371 0%, var(--jade) 55%, #131f1b 100%);
  animation: ambientFloat1 11s ease-in-out infinite;
}
.ambient-card-2 {
  background: linear-gradient(135deg, #ffffff 0%, var(--cream) 60%, #a89b83 100%);
  animation: ambientFloat2 13s ease-in-out infinite;
  opacity: .4;
}
/* Wide, looping orbit-style paths (not a small in-place wobble) so the
   float reads clearly on real phone screens, not just in devtools. */
@keyframes ambientFloat0 {
  0%   { transform: translate(-66%, -70%) translateZ(-70px) rotateY(-34deg) rotateX(10deg); }
  25%  { transform: translate(-48%, -78%) translateZ(-70px) rotateY(4deg) rotateX(-6deg); }
  50%  { transform: translate(-40%, -56%) translateZ(-70px) rotateY(30deg) rotateX(8deg); }
  75%  { transform: translate(-58%, -48%) translateZ(-70px) rotateY(-6deg) rotateX(-4deg); }
  100% { transform: translate(-66%, -70%) translateZ(-70px) rotateY(-34deg) rotateX(10deg); }
}
@keyframes ambientFloat1 {
  0%   { transform: translate(-46%, -46%) translateZ(-140px) rotateY(32deg) rotateX(-10deg); }
  25%  { transform: translate(-24%, -34%) translateZ(-140px) rotateY(-4deg) rotateX(6deg); }
  50%  { transform: translate(-30%, -18%) translateZ(-140px) rotateY(-26deg) rotateX(-8deg); }
  75%  { transform: translate(-50%, -28%) translateZ(-140px) rotateY(8deg) rotateX(4deg); }
  100% { transform: translate(-46%, -46%) translateZ(-140px) rotateY(32deg) rotateX(-10deg); }
}
@keyframes ambientFloat2 {
  0%   { transform: translate(-56%, -24%) translateZ(-190px) rotateY(-24deg) rotateX(12deg); }
  25%  { transform: translate(-38%, -12%) translateZ(-190px) rotateY(6deg) rotateX(-6deg); }
  50%  { transform: translate(-42%, -32%) translateZ(-190px) rotateY(28deg) rotateX(10deg); }
  75%  { transform: translate(-60%, -38%) translateZ(-190px) rotateY(-8deg) rotateX(-4deg); }
  100% { transform: translate(-56%, -24%) translateZ(-190px) rotateY(-24deg) rotateX(12deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-card { animation: none; }
}

/* =============================================================
   8. Hero
   ============================================================= */
.hero-portal {
  position: relative;
  background: transparent; /* the persistent site-bg is the fallback, never flat */
}
/* When the pager takes over, the hero becomes page 0 — same absolute
   full-bleed stacking as every other page, so there's no leftover
   normal-scroll gap between the zoom finishing and Problema handing
   in. Only positioning is overridden; the hero keeps its own internal
   layout (hero-portal-pin fills it completely either way). */
.pager.is-paging .hero-portal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pager.is-paging .hero-portal-pin { height: 100%; }
.hero-portal-pin {
  position: relative;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}
.hero-portal-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-portal-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 34% 41%;
  will-change: transform;
  /* Calibrated to the real photo: the monitor screen sits at roughly
     34%/41% of the frame (left-of-center); the person is a dark
     silhouette on the right. Zoom scales toward this exact point. */
  transform-origin: 34% 41%;
}
/* Frame-sequence canvas (desktop and mobile both have a clip now) —
   hidden until JS confirms it can load and draw frames (has-frame-seq);
   the photo above always stays underneath as the poster, so there's
   never a blank flash. */
.hero-portal-bg canvas {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-portal.has-frame-seq .hero-portal-bg canvas { display: block; }
/* Directional vignette — dark RIGHT edge (over the person's
   silhouette, where the copy sits) for legibility, monitor on the
   left stays the brightest, least-obscured part of the frame. */
.hero-portal-vignette {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(270deg, rgba(20,17,15,.82) 0%, rgba(20,17,15,.35) 42%, transparent 62%),
    linear-gradient(0deg, rgba(20,17,15,.75) 0%, transparent 22%),
    linear-gradient(180deg, rgba(20,17,15,.55) 0%, transparent 26%);
  pointer-events: none;
}
.hero-portal-scrim {
  position: absolute; inset: 0; z-index: 3;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
}
/* Hero title/sub carry two copy variants: the full one reads well over
   a wide desktop frame, but on a phone it buries the background video
   under a wall of text — so mobile gets a short, punchy rewrite of the
   same already-approved message instead of the long version shrunk down. */
.is-mobile-only { display: inline; }
.is-desktop-only { display: none; }
@media (min-width: 720px) {
  .is-mobile-only { display: none; }
  .is-desktop-only { display: inline; }
}

.hero-title {
  font-size: clamp(2.4rem, 5.6vw, 4rem);
  max-width: 14ch;
}
/* Same bronze-italic accent the rest of the site already uses for its
   section-title punchlines (.section-title em) — the hero was the one
   place that didn't carry it, which is part of why it read as generic. */
.hero-title em { color: var(--bronze); font-style: italic; }
@media (max-width: 719px) {
  /* A narrower max-width wraps to more, shorter lines — the opposite
     of what a cramped phone screen needs. Letting lines run wider
     (instead of shrinking type) is what actually shortens the block. */
  .hero-title {
    font-size: clamp(2.1rem, 9.5vw, 2.9rem);
    max-width: none;
    letter-spacing: -0.02em;
    text-shadow: 0 4px 28px rgba(0, 0, 0, 0.5);
  }
  .hero-sub { max-width: none; font-size: .96rem; }
  #intro .eyebrow { margin-bottom: .7rem; }
  /* The ambient floating cards behind #intro (see .ambient-card) can
     swing bright/bronze right behind this text on phones — without a
     shadow it either washes out against a light card or, for the
     eyebrow specifically, nearly disappears since it's the same bronze
     as ambient-card-0. Same treatment .hero-title already had. */
  #intro .eyebrow,
  #intro .hero-sub,
  #intro .hero-trust-inline {
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.65), 0 1px 4px rgba(0, 0, 0, 0.7);
  }
}
.hero-sub {
  margin-top: 1.5rem;
  max-width: 46ch;
  color: var(--mute);
  font-size: clamp(1rem, 1.5vw, 1.14rem);
}
.hero-actions {
  margin-top: 1.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.hero-trust-inline {
  margin-top: 1.1rem;
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--mute);
  letter-spacing: .01em;
}
.hero-trust-inline strong { color: var(--bronze); font-weight: 600; }

/* "Desliza" cue — the only thing in the hero besides the video. Three
   layers so their transforms never fight: .hero-portal-cue (outer)
   only positions it — bottom-anchored on mobile, bottom-left and bigger
   on desktop; .hero-cue-motion (middle) does the mobile "follow me"
   travel; .hero-cue-badge (inner) carries the mouse-tilt (data-tilt
   reuses the same system as the benefit cards) plus the visual chrome. */
.hero-portal-cue {
  position: absolute; top: 50%; left: 50%; z-index: 2;
  transform: translate(-50%, -50%);
}
@media (min-width: 720px) {
  /* "grande para que se note" — bottom-left corner, noticeably bigger
     than the mobile version, no longer competing for the dead center. */
  .hero-portal-cue {
    top: auto; left: clamp(1.5rem, 4vw, 3rem); bottom: clamp(1.5rem, 5vh, 3rem);
    transform: none;
  }
}
@media (max-width: 719px) {
  /* Rather than a static "swipe down" hint, the badge itself travels
     bottom-to-top at a steady, deliberate pace — the idea being the
     viewer rests a finger on it and follows it up the screen, which
     hands them the "correct" scroll speed instead of just telling them
     to scroll. Anchored from the bottom so the whole vertical run (see
     heroCueSwipe) has room before it reaches the nav. */
  .hero-portal-cue { top: auto; bottom: 12%; left: 50%; transform: translateX(-50%); }
  .hero-cue-motion { animation: heroCueSwipe 3.6s linear infinite; }
}
.hero-cue-badge {
  position: relative;
  width: clamp(72px, 9vw, 88px);
  height: clamp(72px, 9vw, 88px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  border-radius: 50%;
  border: 1px solid rgba(201, 151, 74, 0.45);
  background: rgba(20, 17, 15, 0.5);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream);
}
@media (min-width: 720px) {
  .hero-cue-badge { width: 128px; height: 128px; font-size: .74rem; gap: .35rem; }
}
.hero-cue-badge::before {
  content: "";
  position: absolute; inset: -9px;
  border-radius: 50%;
  border: 1px solid rgba(201, 151, 74, 0.35);
  animation: heroCuePulse 2.4s ease-out infinite;
}
.hero-cue-arrow {
  font-size: 1.05rem;
  color: var(--bronze);
  animation: heroCueArrow 1.6s ease-in-out infinite;
}
@media (min-width: 720px) { .hero-cue-arrow { font-size: 1.5rem; } }
.hero-cue-hand { width: 26px; height: 26px; color: var(--bronze); }
@keyframes heroCuePulse {
  0%   { opacity: .8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.4); }
}
@keyframes heroCueArrow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}
@keyframes heroCueSwipe {
  0%   { transform: translateY(0); opacity: 0; }
  6%   { opacity: 1; }
  78%  { transform: translateY(-46vh); opacity: 1; }
  88%  { transform: translateY(-46vh); opacity: 0; }
  89%  { transform: translateY(0); }
  100% { transform: translateY(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cue-motion { animation: none; }
  .hero-cue-badge::before, .hero-cue-arrow { animation: none; }
}

/* =============================================================
   9. Problema / Agitación
   ============================================================= */
.problem-body {
  max-width: 62ch;
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  color: var(--cream);
}
.problem-body p + p { margin-top: 1.3rem; }
.problem-body .is-mute { color: var(--mute); }

/* Desktop: editorial two-column split instead of a single stacked column */
@media (min-width: 960px) {
  #problema .container {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 4rem;
    align-items: start;
  }
  #problema .section-head { margin-bottom: 0; max-width: none; }
}

/* =============================================================
   10. Caso real
   ============================================================= */
.case {
  background: transparent;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.case-grid {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 960px) {
  .case-grid { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
}
.case-body {
  max-width: 52ch;
  color: var(--mute);
  font-size: 1.05rem;
}
.case-body + .case-body { margin-top: 1rem; }
.case-stats {
  margin-top: 2.3rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.stat-value {
  font-family: var(--mono);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  color: var(--bronze);
  font-weight: 600;
}
.stat-label {
  margin-top: .35rem;
  font-size: .82rem;
  color: var(--mute);
  line-height: 1.4;
}
.case-cta { margin-top: 2.2rem; }

/* Deliverables checklist — replaces a redundant screenshot with
   substance: what was actually built, in the client's own facts. */
.case-deliverables {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding: clamp(1.7rem, 3.4vw, 2.4rem);
  background: rgba(20, 17, 15, 0.82);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid var(--line);
  border-radius: 20px;
}
.deliverable-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-size: 1rem;
  color: var(--cream);
}
.deliverable-check {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(70, 112, 95, 0.22);
  color: var(--jade-bright);
  display: grid;
  place-items: center;
  font-size: .85rem;
  font-weight: 700;
  margin-top: .1rem;
}

/* =============================================================
   11. Qué incluye — asymmetric (no identical-card grid, no fake numbering)
   ============================================================= */
.includes-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .includes-grid { grid-template-columns: repeat(6, 1fr); }
  .includes-grid .include-card:nth-child(1) { grid-column: span 6; }
  .includes-grid .include-card:nth-child(2) { grid-column: span 2; }
  .includes-grid .include-card:nth-child(3) { grid-column: span 2; }
  .includes-grid .include-card:nth-child(4) { grid-column: span 2; }
  .includes-grid .include-card:nth-child(5) { grid-column: span 3; }
  .includes-grid .include-card:nth-child(6) { grid-column: span 3; }
}
.include-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Premium gold frame — was reusing .card's plain neutral border,
     which read as too basic for the section that's supposed to sell
     the offer. A tinted border + a soft outer glow + a slightly
     brighter inner hairline reads as "framed", without going full
     gradient-border/glow (kept deliberately understated). */
  border-color: rgba(201, 151, 74, 0.35);
  box-shadow: 0 0 0 1px rgba(201, 151, 74, 0.09) inset, 0 22px 48px -28px rgba(0, 0, 0, 0.65);
}
.include-card:nth-child(1) {
  background: linear-gradient(155deg, rgba(31,27,23,.85), rgba(32,26,18,.85));
  border-color: rgba(201, 151, 74, 0.48);
}
.include-card:nth-child(1) h3 { font-size: 1.4rem; }
.include-card:nth-child(1) p { max-width: 46ch; font-size: 1.02rem; }
.include-card h3 {
  font-family: var(--sans);
  font-size: 1.08rem;
  font-weight: 700;
  margin-bottom: .6rem;
}
.include-card p { color: var(--mute); font-size: .96rem; }

/* Elegant golden glow that follows the cursor position (--mx/--my
   set by initTilt's mousemove handler), layered under the copy. */
.include-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(201, 151, 74, .28), transparent 65%);
  opacity: 0;
  transition: opacity .35s var(--ease-ui);
  pointer-events: none;
}
.include-card:hover::before { opacity: 1; }
.include-card > * { position: relative; z-index: 1; }

/* =============================================================
   12. Cómo funciona — the one deliberate numbered sequence
   ============================================================= */
.process-list {
  display: grid;
  gap: 1rem;
}
/* Cards now (used to be a plain divider-list) — this was the one section
   with no interactive/tilt treatment at all; same recipe as .include-card:
   data-tilt for the mouse-reactive 3D tilt, ::before for the cursor-
   following golden glow. */
.process-item {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 1.2rem;
  padding: 1.6rem 1.5rem;
  background: rgba(31, 27, 23, 0.82);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid var(--line);
  border-radius: 20px;
}
.process-item::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(201, 151, 74, .28), transparent 65%);
  opacity: 0;
  transition: opacity .35s var(--ease-ui);
  pointer-events: none;
}
.process-item:hover::before { opacity: 1; }
.process-item > * { position: relative; z-index: 1; }
.process-num {
  font-family: var(--mono);
  font-size: 1.1rem;
  color: var(--bronze);
}
.process-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: .3rem;
}
.process-body { color: var(--mute); font-size: .96rem; max-width: 52ch; }

/* Desktop: four columns side by side instead of a tall stacked list */
@media (min-width: 960px) {
  .process-list { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
  .process-item { grid-template-columns: 1fr; gap: .9rem; }
  .process-body { max-width: none; }
}

/* =============================================================
   13. Inversión
   ============================================================= */
.price-card {
  max-width: 560px;
  padding: clamp(1.8rem, 4vw, 2.6rem);
  background: linear-gradient(160deg, rgba(31,27,23,.85), rgba(23,19,16,.85));
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.price-card::before {
  content: "";
  position: absolute; inset: -40% -10% auto -10%; height: 60%;
  background: radial-gradient(50% 60% at 30% 20%, rgba(201,151,74,0.16), transparent 70%);
  pointer-events: none;
}
/* Shine sweep — a real element (main.js tweens it with gsap, a ::before
   can't be targeted directly), not a decorative loop: it plays once each
   time this page comes into view, understated rather than a slot-machine
   flash — pricing is the one place a gimmick reads cheap fastest. */
.price-shine {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .16) 50%, transparent 58%);
  pointer-events: none;
}
.price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.15rem;
}
.price-row + .price-row { border-top: 1px solid var(--line); }
.price-label { font-size: .98rem; }
.price-value {
  font-family: var(--mono);
  font-size: 1.5rem;
  color: var(--bronze);
  white-space: nowrap;
}
.price-value small { font-size: .6em; color: var(--mute); font-family: var(--sans); }
.price-note {
  margin-top: 1.4rem;
  color: var(--mute);
  font-size: .92rem;
  max-width: 44ch;
}

/* Desktop: reassurance panel beside the price card instead of empty space */
/* Used to be bare text floating beside the price card — next to a card
   with its own background/border/glow/tilt, a plain paragraph read as an
   afterthought no matter what the copy said. Same card treatment now, so
   "cero riesgo" actually competes for attention instead of losing by
   default. */
.inversion-note {
  position: relative;
  overflow: hidden;
  margin-top: 2.2rem;
  padding: clamp(1.5rem, 3.2vw, 2.1rem);
  background: rgba(31, 27, 23, 0.6);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid rgba(201, 151, 74, 0.32);
  border-radius: 18px;
  color: var(--cream);
  font-size: 1.03rem;
  max-width: 40ch;
}
.inversion-note-kicker, .inversion-note p { position: relative; z-index: 1; }
.inversion-note-kicker {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--bronze);
  margin-bottom: .6rem;
  display: block;
}
@media (min-width: 960px) {
  .inversion-grid {
    display: grid;
    grid-template-columns: 1fr 0.7fr;
    gap: 3.5rem;
    align-items: center;
  }
  .inversion-note { margin-top: 0; }
}

/* =============================================================
   14. CTA final
   ============================================================= */
.cta-final {
  text-align: center;
  background: transparent; /* second punch-through for the 3D scene */
}
.cta-final::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(90% 70% at 50% 60%, rgba(20,17,15,0.4) 0%, var(--bg) 78%);
  pointer-events: none;
}
.cta-final-inner {
  max-width: 640px;
  margin-inline: auto;
}
.cta-final .section-title { margin-bottom: 1rem; }
.cta-final p { color: var(--mute); font-size: 1.05rem; margin-bottom: 2rem; }

/* =============================================================
   15. Footer
   ============================================================= */
.page-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: .76rem;
  color: var(--mute);
}
.page-footer img { height: 28px; width: auto; opacity: .8; }

/* =============================================================
   16b. Pager — full-screen paginated pages (signature effect, every
   viewport). Default (no-JS / reduced-motion) state: plain stacked
   document flow, identical to a normal one-pager. JS only switches
   to the fullscreen-page system by adding .is-paging — content is
   never hidden by CSS alone.
   ============================================================= */
.pager { position: relative; }

/* perspective gives the page-to-page rotateY (main.js goTo()) an actual
   vanishing point instead of looking like a flat horizontal skew. */
.pager.is-paging { height: 100vh; height: 100dvh; overflow: hidden; perspective: 1600px; }
.pager.is-paging .page {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* A page whose content is taller than the viewport (dense content
     on a short phone screen) scrolls internally via the browser's own
     scroll-chaining — the wheel/touch gesture scrolls this first, and
     only once it bottoms out does the outer pager advance. Nothing
     ever gets silently clipped. */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;
  align-items: center;
  align-items: safe center;
  padding-top: var(--nav-h);
  padding-bottom: 0;
}
.pager.is-paging .page .section-head { margin-bottom: clamp(1.1rem, 2.4vw, 1.8rem); }
.pager.is-paging .page .section-title { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.pager.is-paging .page.cta-final .page-footer {
  position: absolute; bottom: 1.4rem; left: 0; right: 0;
}
@media (max-width: 719px) {
  /* On a tall phone screen, the CTA content (vertically centered on
     its own, footer pinned separately to the very bottom edge) left a
     big dead gap between them. Folding the footer into the same
     centered flex column — as a second stacked item instead of an
     absolutely-positioned one — balances the whole page as one block. */
  .pager.is-paging .page.cta-final {
    flex-direction: column;
    justify-content: center;
    gap: clamp(2.5rem, 8vh, 4rem);
  }
  .pager.is-paging .page.cta-final .page-footer { position: static; }
}
/* "Qué incluye" has the most content (6 cards) — needs a tighter pass
   to fit one screen without internal scroll. */
.pager.is-paging #incluye .includes-grid { gap: .65rem; }
.pager.is-paging #incluye .card { padding: 1.05rem 1.3rem; }
.pager.is-paging #incluye .include-card h3 { font-size: .94rem; margin-bottom: .3rem; }
.pager.is-paging #incluye .include-card p { font-size: .8rem; line-height: 1.4; }
.pager.is-paging #incluye .include-card:nth-child(1) h3 { font-size: 1.1rem; }
.pager.is-paging #incluye .include-card:nth-child(1) p { font-size: .86rem; max-width: 52ch; }

/* Phones: one card at a time, swiped horizontally, instead of a
   cramped 2-column grid — native scroll-snap, no JS needed. The grid
   bleeds to the screen edge (negative margin) and re-adds its own
   inline padding so the next card peeks in, hinting there's more. */
@media (max-width: 719px) {
  .pager.is-paging #incluye .section-head { margin-bottom: .9rem; }
  .pager.is-paging #incluye .section-title { font-size: 1.4rem; }
  .pager.is-paging #incluye .includes-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: .85rem;
    margin-inline: -1.5rem;
    padding-inline: 1.5rem;
    padding-bottom: .4rem;
    scrollbar-width: none;
  }
  .pager.is-paging #incluye .includes-grid::-webkit-scrollbar { display: none; }
  .pager.is-paging #incluye .include-card {
    grid-column: unset;
    flex: 0 0 82%;
    scroll-snap-align: center;
  }
  .pager.is-paging #incluye .card { padding: 1.4rem 1.5rem; }
  .pager.is-paging #incluye .include-card h3 { font-size: 1.05rem; margin-bottom: .4rem; }
  .pager.is-paging #incluye .include-card p { font-size: .88rem; line-height: 1.5; }
  .pager.is-paging #incluye .include-card:nth-child(1) h3 { font-size: 1.05rem; }
  .pager.is-paging #incluye .include-card:nth-child(1) p { font-size: .88rem; max-width: none; }
}

/* Phones: "Caso real", "Cómo funciona" and "Inversión" were each tall
   enough (measured: 144-242px past a 375×667 viewport) to force the
   page's own internal overflow-y:auto scroll before the pager itself
   would advance — and that handoff between an inner scroll and the
   pager's own pinned scroll is exactly where scroll felt "stuck" or
   "laggy" on real phones. Compacting these three so they fit without
   ever needing that inner scroll removes the interaction entirely,
   rather than trying to make it perfect. */
@media (max-width: 719px) {
  .pager.is-paging #caso-real .case-grid { gap: 1.3rem; }
  .pager.is-paging #caso-real .section-title { font-size: 1.3rem; }
  .pager.is-paging #caso-real .case-stats { margin-top: 1.1rem; gap: .8rem; }
  .pager.is-paging #caso-real .stat-value { font-size: 1.3rem; }
  .pager.is-paging #caso-real .stat-label { font-size: .72rem; margin-top: .2rem; }
  .pager.is-paging #caso-real .case-cta { margin-top: 1rem; }
  .pager.is-paging #caso-real .case-deliverables { padding: 1.05rem 1.15rem; gap: .65rem; border-radius: 16px; }
  .pager.is-paging #caso-real .deliverable-item { font-size: .84rem; gap: .7rem; }
  .pager.is-paging #caso-real .deliverable-check { width: 20px; height: 20px; font-size: .74rem; }

  .pager.is-paging #proceso .process-list { gap: .6rem; }
  .pager.is-paging #proceso .process-item { padding: 1rem 1.1rem; gap: .9rem; border-radius: 16px; }
  .pager.is-paging #proceso .process-num { font-size: .92rem; }
  .pager.is-paging #proceso .process-title { font-size: .94rem; margin-bottom: .15rem; }
  .pager.is-paging #proceso .process-body { font-size: .82rem; line-height: 1.4; }

  /* .page's padding-top:var(--nav-h) (base rule) reserves nav clearance
     on top only — fine for pages that fill the screen, but on a short
     page like this one, align-items:center then centers the content
     within a box that's already missing that chunk off its top, so the
     leftover space lands mostly below instead of split evenly. Matching
     padding-bottom balances the box itself, so centering actually reads
     as centered instead of pushed up. */
  .pager.is-paging #inversion { padding-bottom: var(--nav-h); }
  .pager.is-paging #inversion .section-head { margin-bottom: .5rem; }
  .pager.is-paging #inversion .section-title { font-size: 1.3rem; }
  .pager.is-paging #inversion .price-card { padding: .9rem 1.15rem; }
  .pager.is-paging #inversion .price-row { padding-block: .55rem; }
  .pager.is-paging #inversion .price-label { font-size: .88rem; }
  .pager.is-paging #inversion .price-value { font-size: 1.15rem; }
  .pager.is-paging #inversion .price-note { margin-top: .5rem; font-size: .78rem; }
  .pager.is-paging #inversion .inversion-note { margin-top: .55rem; padding: .85rem 1.05rem; }
  .pager.is-paging #inversion .inversion-note-kicker { font-size: 1.02rem; margin-bottom: .25rem; }
  .pager.is-paging #inversion .inversion-note p { font-size: .82rem; }

  .pager.is-paging #caso-real .section-title { font-size: 1.2rem; }
  .pager.is-paging #caso-real .case-cta { margin-top: .8rem; }
}

.pager-dots { display: none; }
.pager.is-paging .pager-dots {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  position: fixed;
  right: clamp(1.2rem, 3vw, 2.2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
}
.pager-dots button {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(237,230,218,0.25);
  border: 0; padding: 0; cursor: pointer;
  transition: background .3s var(--ease-ui), transform .3s var(--ease-ui);
}
.pager-dots button:hover { background: rgba(237,230,218,0.5); }
.pager-dots button.is-active { background: var(--bronze); transform: scale(1.35); }

/* "Desliza" nudge, bottom-right — hidden by default (JS-only opt-in,
   see main.js armNudge/showNudge/hideNudge), small and understated. */
.pager-nudge {
  display: none;
}
.pager.is-paging .pager-nudge {
  position: fixed;
  right: clamp(1.1rem, 3vw, 2rem);
  bottom: clamp(1.1rem, 3vh, 1.8rem);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .85rem;
  border-radius: 100px;
  border: 1px solid rgba(201, 151, 74, 0.35);
  background: rgba(20, 17, 15, 0.55);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--ease-ui);
}
.pager.is-paging .pager-nudge.is-visible { opacity: 1; }
@media (max-width: 719px) {
  /* Mobile-only: didn't land well, dropped — desktop keeps it. */
  .pager.is-paging .pager-nudge { display: none; }
}
.pager-nudge-arrow {
  font-style: normal;
  color: var(--bronze);
  display: inline-block;
  animation: heroCueArrow 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .pager-nudge-arrow { animation: none; }
}

/* =============================================================
   16. Responsive helpers
   ============================================================= */
@media (min-width: 540px)  { }
@media (min-width: 720px)  { }
@media (min-width: 960px)  { }
@media (min-width: 1280px) { }
@media (min-width: 1600px) { .container { max-width: 1320px; } }

/* =============================================================
   17. Reduced motion — only intrusive effects
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero-halo { animation: none; }
}