/* ==========================================================================
   Cervelló Studio
   Tema oscuro, bloqueado. Un solo acento. Superficies a 16px, botones píldora.
   Cada sección entra de una forma distinta: la entrada dice algo sobre lo que
   entra. Todo se apaga con prefers-reduced-motion.
   ========================================================================== */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* La voz de la marca. Su logo es un serif clásico de alto contraste, así que
   los titulares hablan con esa misma voz. El cuerpo sigue en Geist. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/cormorant-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/cormorant-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #050a11;
  --ink-2: #091320;
  --ink-3: #0f1f33;
  --bone: #eef3f8;
  --bone-dim: #9fb0c2;
  --bone-faint: #8496a8;
  --line: rgba(238, 243, 248, 0.08);
  --line-strong: rgba(238, 243, 248, 0.17);
  --accent: #5b9bd8;
  --glow: #b9daf7;
  --accent-ink: #04101d;
  --accent-soft: rgba(91, 155, 216, 0.07);

  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  --r: 16px;
  --shell: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 68px;

  /* profundidad: desplazamiento real y desenfoque suave, nunca un halo plano */
  --lift: 0 18px 44px -24px rgba(0, 0, 0, 0.9);
  --lift-hi: inset 0 1px 0 rgba(238, 243, 248, 0.055);

  color-scheme: dark;
  caret-color: var(--accent);
  accent-color: var(--accent);
  scrollbar-color: rgba(238, 243, 248, 0.2) transparent;
  scrollbar-width: thin;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* al saltar desde el menú, el título no puede quedar debajo de la barra fija */
section[id], main[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* grano fino sobre toda la página: quita el plano digital del negro liso */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; text-underline-offset: 0.22em; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul { list-style: none; padding: 0; }

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

/* la barra de scroll también es parte del diseño */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb {
  background: rgba(238, 243, 248, 0.16);
  border-radius: 999px;
  border: 3px solid var(--ink);
}

@media (hover: hover) and (pointer: fine) {
::-webkit-scrollbar-thumb:hover { background: rgba(238, 243, 248, 0.3); }
}

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(76px, 10vw, 150px); }
.section--tight { padding-block: clamp(56px, 7.5vw, 100px); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---------- tipografía ---------- */

.display {
  font-family: var(--display);
  font-size: clamp(2.9rem, 7.6vw, 5.8rem);
  line-height: 0.98;
  letter-spacing: -0.028em;
  font-weight: 500;
}

.h2 {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5.4vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  font-weight: 500;
  text-wrap: balance;
}

.lede {
  font-size: clamp(1.08rem, 1.7vw, 1.28rem);
  line-height: 1.5;
  color: var(--bone-dim);
  max-width: 50ch;
}

.body-dim { color: var(--bone-dim); max-width: 68ch; }

/* ==========================================================================
   LA IDEA: LA ATENCIÓN ES UNA LUZ
   La página nace a oscuras. El cursor es la atención, y lo que toca se
   enciende. Es literalmente la tesis del negocio: hay profesionales
   brillantes a los que nadie mira. Por eso el movimiento no decora, ilustra.
   ========================================================================== */

/* la luz que acompaña al cursor por toda la página */
.torch {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    380px 380px at var(--px, -999px) var(--py, -999px),
    rgba(91, 155, 216, 0.09),
    rgba(91, 155, 216, 0.03) 42%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}
.torch.is-on { opacity: 1; }

/* el campo de puntos del hero: casi invisible hasta que lo alumbras */
.field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* el contenido siempre por encima de la luz */
.nav, main, .footer { position: relative; z-index: 1; }


/* ==========================================================================
   LA ENTRADA
   La misma imagen de la marca, hecha web: la pantalla a oscuras, el haz de luz
   se abre y revela el nombre. Dos segundos, solo en la primera visita, y se
   salta tocando la pantalla. Con movimiento reducido no aparece.
   ========================================================================== */

.intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: #03070d;
  cursor: pointer;
  overflow: hidden;
}
.intro[hidden] { display: none; }

/* el haz: un cono de luz que se abre desde arriba */
.intro__beam {
  position: absolute;
  top: -22%;
  left: 50%;
  width: min(120vw, 1500px);
  height: 150%;
  transform: translateX(-50%) scaleX(0.04);
  transform-origin: 50% 0%;
  background:
    radial-gradient(52% 46% at 50% 26%, rgba(150, 200, 245, 0.42), transparent 68%),
    conic-gradient(from 180deg at 50% 0%,
      transparent 0deg 74deg,
      rgba(110, 168, 222, 0.24) 86deg,
      rgba(150, 200, 245, 0.34) 90deg,
      rgba(110, 168, 222, 0.24) 94deg,
      transparent 106deg 360deg);
  filter: blur(22px);
  opacity: 0;
}

.intro__mark { position: relative; text-align: center; }
.intro__name,
.intro__sub {
  font-family: var(--display);
  text-transform: uppercase;
  color: #eef3f8;
  opacity: 0;
}
.intro__name {
  font-size: clamp(2.4rem, 8vw, 5.4rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
}
.intro__sub {
  margin-top: clamp(6px, 1vw, 12px);
  font-size: clamp(0.8rem, 2.1vw, 1.35rem);
  letter-spacing: 0.34em;
  color: #9fb8cf;
}

@media (prefers-reduced-motion: no-preference) {
  .intro__beam { animation: beam 2.4s var(--ease) forwards; }
  @keyframes beam {
    0%   { opacity: 0; transform: translateX(-50%) scaleX(0.04); }
    22%  { opacity: 1; }
    62%  { opacity: 1; transform: translateX(-50%) scaleX(1); }
    100% { opacity: 0.55; transform: translateX(-50%) scaleX(1.12); }
  }

  .intro__name { animation: markIn 1.5s var(--ease) 0.55s forwards; }
  .intro__sub  { animation: markIn 1.5s var(--ease) 0.78s forwards; }
  @keyframes markIn {
    0%   { opacity: 0; letter-spacing: 0.34em; filter: blur(10px); }
    100% { opacity: 1; filter: blur(0); }
  }

  /* la cortina se retira hacia arriba y deja ver la página */
  .intro.is-out { animation: curtain 0.85s var(--ease) forwards; }
  @keyframes curtain {
    to { clip-path: inset(0 0 100% 0); opacity: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
}

/* ---------- barra de progreso de lectura ---------- */

.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 60;
  background: var(--accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}

/* ---------- botones ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.97rem;
  letter-spacing: -0.012em;
  padding: 15px 28px;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.18s var(--ease), background-color 0.3s var(--ease),
    border-color 0.3s var(--ease), box-shadow 0.45s var(--ease), color 0.3s var(--ease);
}

.btn--lg { padding: 18px 36px; font-size: 1.05rem; }
.btn--sm { padding: 10px 20px; font-size: 0.9rem; }

.btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 26px -20px rgba(91, 155, 216, 0.75);}

@media (hover: hover) and (pointer: fine) {
.btn--primary:hover { box-shadow: 0 16px 40px -20px rgba(91, 155, 216, 0.6); }
}
.btn--primary::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: radial-gradient(80px 80px at var(--bx, 50%) var(--by, 50%), var(--glow), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
.btn--primary:hover::before { opacity: 0.9; }
}
.btn:active { transform: scale(0.97); }

.btn--ghost { border-color: var(--line-strong); color: var(--bone); }
.btn--ghost::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bone);
  transform: translateY(101%);
  transition: transform 0.5s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
.btn--ghost:hover { color: var(--ink); border-color: var(--bone); }
}

@media (hover: hover) and (pointer: fine) {
.btn--ghost:hover::before { transform: translateY(0); }
}

/* ---------- navegación ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(10, 10, 11, 0.66);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--line);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.nav__brand {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.12em;
  font-size: 1.16rem;
  text-transform: uppercase;
  /* relieve: la luz le da por arriba y deja sombra abajo, como al logo */
  background: linear-gradient(175deg, #ffffff 0%, var(--bone) 42%, #8fa8bd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(5, 10, 17, 0.9);
  filter: drop-shadow(0 2px 6px rgba(91, 155, 216, 0.25));
  transition: filter 0.45s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
.nav__brand:hover { filter: drop-shadow(0 2px 14px rgba(91, 155, 216, 0.6)); }
}
.nav__brand sup { font-size: 0.54em; color: var(--bone-faint); }

.nav__links { display: flex; align-items: center; gap: 32px; }
.nav__links a { font-size: 0.93rem; color: var(--bone-dim); }
.nav__links a span { display: inline-block; position: relative; transition: color 0.25s var(--ease); }
.nav__links a span::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  height: 1px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.45s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
.nav__links a:hover span { color: var(--bone); }
}

@media (hover: hover) and (pointer: fine) {
.nav__links a:hover span::after { transform: scaleX(1); transform-origin: 0 50%; }
}

@media (max-width: 880px) { .nav__links { display: none; } }

/* en movil los dos botones ocupan el ancho: dos filas irregulares se ven sucias */
@media (max-width: 520px) {
  .hero__actions { display: grid; gap: 10px; width: 100%; }
  .hero__actions .btn { width: 100%; }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: calc(100dvh - var(--nav-h));
  display: flex;
  align-items: center;
  padding-block: clamp(44px, 6vw, 78px);
  overflow: hidden;
}

/* el halo respira solo y además sigue al puntero */
.hero__aura {
  z-index: 0;
  position: absolute;
  inset: -25%;
  pointer-events: none;
  background:
    radial-gradient(32% 34% at calc(var(--mx, 0.62) * 100%) calc(var(--my, 0.34) * 100%), rgba(91, 155, 216, 0.2), transparent 64%),
    radial-gradient(46% 40% at 88% 78%, rgba(91, 155, 216, 0.07), transparent 66%);
  transition: background 0.55s linear;
  animation: breathe 14s ease-in-out infinite alternate;
}
@keyframes breathe {
  to { transform: scale(1.14) translate3d(2%, -2%, 0); }
}

.hero__inner { position: relative; z-index: 2; }
/* 22ch: la frase más larga de las que rotan tiene que caber sin cortarse */
.hero__title { margin-bottom: clamp(22px, 2.6vw, 32px); max-width: min(100%, 22ch); }
.hero__lede { margin-bottom: clamp(30px, 3.4vw, 44px); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* cada línea del titular sube desde detrás de su propia máscara */
.line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.line > span { display: block; }


/* ---------- el titular que se reescribe ----------
   La tercera línea cuenta tres ideas en el mismo sitio: el problema, su
   consecuencia y la salida. Las tres frases van superpuestas y una sola
   está dentro de la máscara; el resto espera fuera, arriba o abajo.

   ⚠️ Nada de `animation` aquí: una animación con `both` fija el transform
   para siempre y deja la primera frase clavada encima de las demás. Solo
   transiciones, que sí ceden el control. */

.line--rot { position: relative; display: block; }

/* una copia invisible de la frase más larga sostiene el alto y el ancho */
.rot__sizer { display: block; visibility: hidden; white-space: nowrap; }

.line--rot .rot__i {
  position: absolute;
  inset: 0;
  display: block;
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  .line--rot .rot__i { transform: translateY(150%); transition: transform 0.85s var(--ease); }
  .line--rot .rot__i.is-on { transform: none; }
  .line--rot .rot__i.is-out { transform: translateY(-150%); transition-duration: 0.7s; }
}

/* sin movimiento: se ve solo la primera y no rota */
@media (prefers-reduced-motion: reduce) {
  .line--rot .rot__i { opacity: 0; }
  .line--rot .rot__i:first-of-type { opacity: 1; }
}

/* ---------- el haz de luz entre tramos ----------
   Marca el paso de un bloque al siguiente. Es la misma idea del logo: la luz
   que recorre la oscuridad. */

.sweep {
  position: relative;
  height: 1px;
  margin-inline: var(--gutter);
  background: var(--line);
  overflow: visible;
}
.sweep::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 42%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--glow), transparent);
  filter: blur(1.5px);
  opacity: 0;
  transform: translateX(-60%);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sweep::after {
      animation: barre linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 62%;
    }
    @keyframes barre {
      0%   { opacity: 0; transform: translateX(-60%); }
      22%  { opacity: 0.85; }
      78%  { opacity: 0.85; }
      100% { opacity: 0; transform: translateX(200%); }
    }
  }
}

/* ---------- el vídeo del método ---------- */

.reel { padding-bottom: clamp(20px, 4vw, 56px); }

.tilt { perspective: 1200px; }
.tilt__in { transform: translateZ(30px); transform-style: preserve-3d; }

.frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r);
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(70% 90% at 50% 120%, rgba(91, 155, 216, 0.13), transparent 62%),
    linear-gradient(162deg, var(--ink-3), var(--ink-2));
  overflow: hidden;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 28px;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.55s var(--ease), border-color 0.45s var(--ease);
  box-shadow: var(--lift), var(--lift-hi);
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
.frame:hover { border-color: rgba(91, 155, 216, 0.42); }
}
.frame--wide { aspect-ratio: 16 / 9; }
.frame--square { aspect-ratio: 1 / 1; }

.frame__label { font-size: 0.84rem; color: var(--bone-faint); line-height: 1.5; }

.frame__play {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 999px;
  background: var(--accent);
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  transition: transform 0.45s var(--ease);
  box-shadow: 0 12px 30px -16px rgba(91, 155, 216, 0.7);
}

@media (hover: hover) and (pointer: fine) {
.frame:hover .frame__play { transform: scale(1.1); }
}
.frame__play svg { width: 21px; height: 21px; fill: var(--accent-ink); margin-left: 3px; }

/* el único bucle continuo de la página: marca lo único reproducible */
.frame__ring { position: absolute; inset: 0; border-radius: 999px; border: 1px solid var(--accent); animation: ping 2.8s var(--ease) infinite; }
@keyframes ping {
  0% { transform: scale(1); opacity: 0.7; }
  70%, 100% { transform: scale(1.95); opacity: 0; }
}

/* ---------- banda de cifras ---------- */

.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 48px); padding-top: clamp(40px, 5vw, 64px); }

.figure__n {
  min-height: 1em;
  white-space: nowrap;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: clamp(1.75rem, 3.1vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.055em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.figure__t { font-size: 0.93rem; color: var(--bone-dim); line-height: 1.45; max-width: 24ch; }

@media (max-width: 760px) { .figures { grid-template-columns: repeat(2, 1fr); gap: 34px 24px; } }

/* ---------- pila fijada de los tres bloqueos ---------- */

.stack__title { padding-top: clamp(48px, 7vw, 96px); margin-bottom: clamp(36px, 5vw, 64px); }
.stack { padding-bottom: clamp(60px, 9vw, 140px); }

.stack__card {
  position: sticky;
  top: calc(var(--nav-h) + 28px + var(--i) * 22px);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 26px;
  padding-block: clamp(32px, 4vw, 52px);
  box-shadow: 0 -22px 52px -30px rgba(0, 0, 0, 0.95), var(--lift-hi);
  max-width: calc(var(--shell) - var(--gutter) * 2 + 40px);
  margin-inline: auto;
  width: calc(100% - var(--gutter) * 2);
}

.stack__inner {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: clamp(16px, 3vw, 40px);
  align-items: start;
  padding-inline: clamp(12px, 2vw, 28px);
}
.stack__n {
  font-size: 0.95rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  padding-top: 0.5em;
}
@media (max-width: 700px) {
  .stack__inner { grid-template-columns: 1fr; gap: 10px; }
  .stack__n { padding-top: 0; }
}
.stack__h { font-family: var(--display); font-size: clamp(1.7rem, 3.2vw, 2.5rem); letter-spacing: -0.016em; font-weight: 500; margin-bottom: 14px; max-width: 22ch; }
.stack__p { color: var(--bone-dim); max-width: 62ch; }

@media (max-width: 700px) { .stack__card { top: calc(var(--nav-h) + 16px + var(--i) * 14px); } }

/* ---------- manifiesto ---------- */

.manifesto { background: var(--ink-2); border-block: 1px solid var(--line); }
.manifesto__quote {
  font-family: var(--display);
  max-width: 980px;
  font-size: clamp(2.1rem, 4.3vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.manifesto__quote span { transition: color 0.3s linear; }
.manifesto__sig { margin-top: 36px; font-size: 0.92rem; color: var(--bone-faint); }

/* ---------- casos ---------- */

.cases { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; margin-top: clamp(40px, 5vw, 60px); }

.case {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-2);
  padding: clamp(26px, 2.8vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--lift-hi);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
.case:hover { transform: translateY(-5px); box-shadow: var(--lift), var(--lift-hi); }
}
.case--lead { grid-row: span 2; }

/* foco interior que sigue al cursor */
.spot::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(340px 340px at var(--sx, 50%) var(--sy, 0%), rgba(91, 155, 216, 0.14), transparent 68%);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
.spot:hover::before { opacity: 1; }
}

/* y el borde se enciende solo por donde pasa el cursor */
.spot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: radial-gradient(260px 260px at var(--sx, 50%) var(--sy, 0%), rgba(91, 155, 216, 0.75), transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
.spot:hover::after { opacity: 1; }
}

.case__name { font-size: 1.06rem; font-weight: 500; letter-spacing: -0.02em; }
.case__role { font-size: 0.86rem; color: var(--bone-faint); }
.case__big { font-family: 'Geist', system-ui, sans-serif; font-size: clamp(2.2rem, 4.2vw, 3.3rem); line-height: 1; letter-spacing: -0.055em; font-weight: 500; font-variant-numeric: tabular-nums; }
.case__note { font-size: 0.94rem; color: var(--bone-dim); line-height: 1.55; }
.case__meta { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--bone-faint); }
.case__shot {
  border-radius: 10px;
  border: 1px dashed var(--line-strong);
  aspect-ratio: 16 / 11;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 16px;
  font-size: 0.8rem;
  color: var(--bone-faint);
  background: var(--ink-3);
}

@media (max-width: 880px) { .cases { grid-template-columns: 1fr; } .case--lead { grid-row: auto; } }


/* ---------- el hueco de la foto de cada caso ----------
   No es un cuadro vacío: dice exactamente qué va ahí. Cuando llegue la foto,
   se sustituye el bloque por un <img> y el marco se queda igual. */

.case__face {
  display: grid;
  place-items: center;
  gap: 12px;
  text-align: center;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  border: 1px dashed var(--line-strong);
  background:
    radial-gradient(80% 90% at 50% 0%, rgba(91, 155, 216, 0.07), transparent 66%),
    var(--ink-3);
  color: var(--bone-faint);
  font-size: 0.84rem;
  padding: 18px;
  transition: border-color 0.45s var(--ease), color 0.45s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
.case:hover .case__face { border-color: rgba(91, 155, 216, 0.45); color: var(--bone-dim); }
}
.case__face--sm { aspect-ratio: 16 / 9; }
.case__faceicon { display: block; width: 34px; height: 34px; opacity: 0.55; }
.case__faceicon svg { width: 100%; height: 100%; }


/* la etiqueta que deja claro que la foto todavía no está */
.case__face { position: relative; overflow: hidden; }
.case__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px dashed var(--line-strong);
  color: var(--bone-faint);
  background: rgba(5, 10, 17, 0.55);
}

/* un barrido de luz recorre el hueco: se ve que está esperando contenido */
@media (prefers-reduced-motion: no-preference) {
  .case__face::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(91, 155, 216, 0.14) 50%, transparent 62%);
    transform: translateX(-100%);
    animation: esperando 3.6s var(--ease) infinite;
  }
  @keyframes esperando {
    0%, 55% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
}

/* ---------- contraste ---------- */

.versus { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 72px); align-items: start; }
.versus__col { display: grid; gap: 20px; }
.versus__h { font-size: 1.1rem; font-weight: 500; letter-spacing: -0.022em; color: var(--bone-faint); padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.versus__claim { font-family: var(--display); font-size: clamp(1.55rem, 2.8vw, 2.1rem); line-height: 1.2; letter-spacing: -0.016em; }

@media (max-width: 760px) { .versus { grid-template-columns: 1fr; gap: 40px; } }


/* ---------- el contraste: uno a oscuras, el otro encendido ----------
   Ni rojo ni verde. En esta página lo que no funciona se queda sin luz y se
   tacha solo; lo que funciona se enciende. Es la misma idea de siempre. */

.versus__col--no { color: var(--bone-faint); }
.versus__col--no .versus__h { color: var(--bone-faint); }
.versus__col--no .versus__claim {
  color: #5f7183;
  /* se tacha entero, línea a línea, no con una raya que cruza el bloque */
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: transparent;
}
.versus__col--no .body-dim { color: #5f7183; }

.versus__col--si { position: relative; }
.versus__col--si .versus__h { color: var(--accent); }
.versus__col--si .versus__claim { color: var(--bone); }
.versus__col--si .versus__h::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 2.2em;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

@media (prefers-reduced-motion: no-preference) {
  .versus__col--no .versus__claim { transition: text-decoration-color 0.9s linear 0.5s; }
  .versus__col--no.is-in .versus__claim { text-decoration-color: #5f7183; }
  .versus__col--si .versus__h::after { transition: transform 1s var(--ease) 0.35s; }
  .versus__col--si.is-in .versus__h::after { transform: scaleX(1); }
}

/* ---------- las cinco fases: recorrido horizontal ---------- */

.pan { position: relative; }
.pan__sticky { overflow: hidden; padding-block: clamp(56px, 7.5vw, 100px); }
.pan__head { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-bottom: clamp(30px, 4vw, 52px); }
.pan__bar { display: none; width: 170px; height: 2px; background: var(--line-strong); border-radius: 2px; overflow: hidden; }
.pan__bar i { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }

.pan__track { display: flex; gap: 18px; padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }

.phase {
  flex: 0 0 min(440px, 80vw);
  min-height: min(430px, 54vh);
  justify-content: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-2);
  padding: clamp(28px, 3vw, 42px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-snap-align: start;
  box-shadow: var(--lift-hi);
  transition: border-color 0.45s var(--ease), background-color 0.45s var(--ease), transform 0.45s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
.phase:hover { border-color: rgba(91, 155, 216, 0.35); background: var(--ink-3); transform: translateY(-4px); }
}
.phase__i { font-size: 0.82rem; color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 500; }
.phase__name { font-family: var(--display); font-size: clamp(1.6rem, 2.8vw, 2.1rem); letter-spacing: -0.014em; font-weight: 500; }
.phase__p { color: var(--bone-dim); font-size: 0.97rem; line-height: 1.55; }

/* ---------- qué te llevas ---------- */

.takeaway { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.group__list li {
  padding-block: 15px;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  color: var(--bone-dim);
  transition: color 0.35s var(--ease), transform 0.45s var(--ease), border-color 0.35s var(--ease);
}
.group__list li:first-child { border-top: 1px solid var(--line);}

@media (hover: hover) and (pointer: fine) {
.group__list li:hover { color: var(--bone); transform: translateX(10px); border-color: var(--line-strong); }
}
.group__list li strong { color: var(--bone); font-weight: 500; }

@media (max-width: 800px) { .takeaway { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- para quién ---------- */

.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fit__card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(26px, 3vw, 38px);
  display: grid;
  gap: 22px;
  align-content: start;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--lift-hi);
  transition: border-color 0.45s var(--ease);
}
.fit__card--yes { background: var(--accent-soft); border-color: rgba(91, 155, 216, 0.26); }
.fit__h { font-size: 1.12rem; font-weight: 500; letter-spacing: -0.022em; }
.fit__list { display: grid; gap: 13px; }
.fit__list li { font-size: 0.97rem; color: var(--bone-dim); padding-left: 24px; position: relative; line-height: 1.5; }
.fit__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 11px;
  height: 1px;
  background: var(--bone-faint);
  transform-origin: 0 50%;
  transition: transform 0.45s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
.fit__card:hover .fit__list li::before { transform: scaleX(1.6); }
}
.fit__card--yes .fit__list li::before { background: var(--accent); }

@media (max-width: 760px) { .fit { grid-template-columns: 1fr; } }

/* ---------- equipo ---------- */

.team { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 820px) { .team { grid-template-columns: 1fr; } }

/* ---------- faq ---------- */

.faq { margin-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }

.faq summary {
  cursor: pointer;
  list-style: none;
  padding-block: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  letter-spacing: -0.022em;
  font-weight: 500;
  transition: color 0.25s var(--ease), transform 0.4s var(--ease);
}
.faq summary::-webkit-details-marker { display: none;}

@media (hover: hover) and (pointer: fine) {
.faq summary:hover { color: var(--accent); transform: translateX(8px); }
}

.faq summary span { flex: none; width: 20px; height: 20px; position: relative; }
.faq summary span::before,
.faq summary span::after {
  content: '';
  position: absolute;
  background: currentColor;
  inset-inline: 2px;
  top: 9.5px;
  height: 1px;
  transition: transform 0.45s var(--ease);
}
.faq summary span::after { transform: rotate(90deg); }
.faq details[open] summary span::after { transform: rotate(0deg); }

.faq__wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease); }
.faq details[open] .faq__wrap { grid-template-rows: 1fr; }
.faq__answer { overflow: hidden; color: var(--bone-dim); max-width: 68ch; }
.faq details[open] .faq__answer { padding-bottom: 26px; }

/* ---------- cierre ---------- */

.closing { position: relative; overflow: hidden; background: var(--ink-2); border-top: 1px solid var(--line); text-align: center; }
.closing__aura {
  position: absolute;
  inset: -30%;
  pointer-events: none;
  background: radial-gradient(30% 40% at calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.22) * 100%), rgba(91, 155, 216, 0.24), transparent 64%);
  transition: background 0.55s linear;
}
.closing__inner { position: relative; z-index: 1; max-width: 46ch; margin-inline: auto; display: grid; gap: 28px; justify-items: center; }
.seats { font-size: 0.88rem; color: var(--bone-dim); border: 1px solid var(--line-strong); border-radius: 999px; padding: 9px 20px; }
.seats b { color: var(--bone); font-weight: 500; }
.closing__fine { font-size: 0.86rem; color: var(--bone-faint); max-width: 46ch; }

/* ---------- pie ---------- */

.footer { padding-block: 48px; border-top: 1px solid var(--line); }
.footer__inner { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; justify-content: space-between; font-size: 0.86rem; color: var(--bone-faint); }
.footer__links { display: flex; gap: 24px; }
.footer__links a span { position: relative; display: inline-block; transition: color 0.25s var(--ease); }
.footer__links a span::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.45s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
.footer__links a:hover span { color: var(--bone); }
}

@media (hover: hover) and (pointer: fine) {
.footer__links a:hover span::after { transform: scaleX(1); transform-origin: 0 50%; }
}


/* ==========================================================================
   LAS CIFRAS: NINGUNA ENTRA IGUAL QUE LA DE AL LADO
   Una se cuenta, otra se dibuja, otra rueda como un contador mecánico y otra
   simplemente aparece. Si todas hicieran lo mismo, no lo haría ninguna.
   ========================================================================== */

/* 1. rueda: los dígitos caen a su sitio como un cuentakilómetros */
.roll { display: inline-flex; align-items: baseline; }
.roll__s { display: inline-block; }
.roll__d {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  vertical-align: baseline;
}
.roll__d { --v: 0; }
.roll__d i {
  display: block;
  font-style: normal;
  line-height: 1;
  transform: translateY(calc(var(--v) * -1em));
}

/* 2. dibujo: el trazo se escribe y después se rellena */
/* se mide en altura, no en ancho, para que case con las cifras de al lado */
.draw { display: block; height: 1.02em; width: auto; overflow: visible; }
.draw text {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 64px;
  font-weight: 500;
  letter-spacing: -0.055em;
  fill: var(--bone);
  fill-opacity: 1;
  stroke: var(--bone);
  stroke-width: 0.9;
}

/* 3. aparición seca, con un desenfoque que se resuelve */
.pop { display: inline-block; }

/* ---------- el salto de partida de cada caso ---------- */

.jump {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.86rem;
  color: var(--bone-faint);
  font-variant-numeric: tabular-nums;
  margin-top: -6px;
}
.jump__a { text-decoration: line-through; text-decoration-thickness: 1px; opacity: 0.75; }
.jump__l {
  flex: 1 1 auto;
  max-width: 46px;
  height: 1px;
  background: linear-gradient(90deg, var(--bone-faint), var(--accent));
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.jump__b { color: var(--accent); }

/* ---------- la foto real ---------- */

.frame--photo { aspect-ratio: 1 / 1.16; padding: 0; }
.frame--photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.frame--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(190deg, transparent 42%, rgba(10, 10, 11, 0.72));
}

@media (prefers-reduced-motion: no-preference) {
  .roll__d i { transition: transform 1.25s var(--ease); transition-delay: var(--dd, 0ms); }
  .reveal.is-in .roll__d { --v: var(--vt, 0); }

  .draw text {
    fill-opacity: 0;
    stroke-dasharray: var(--len, 900);
    stroke-dashoffset: var(--len, 900);
    transition: stroke-dashoffset 1.5s var(--ease), fill-opacity 0.6s linear 1.1s;
  }
  .reveal.is-in .draw text { stroke-dashoffset: 0; fill-opacity: 1; }

  .pop { opacity: 0; filter: blur(14px); transform: scale(0.88); transition: opacity 0.5s var(--ease), filter 0.7s var(--ease), transform 0.7s var(--ease); }
  .reveal.is-in .pop { opacity: 1; filter: none; transform: none; }

  .jump__l { transition: transform 0.9s var(--ease) 0.5s; }
  .reveal.is-in .jump__l { transform: scaleX(1); }
  .jump__a, .jump__b { opacity: 0; transition: opacity 0.6s var(--ease); }
  .reveal.is-in .jump__a { opacity: 0.75; transition-delay: 0.3s; }
  .reveal.is-in .jump__b { opacity: 1; transition-delay: 1.1s; }
}


/* ==========================================================================
   BLOQUES DEL OFFERDOC
   La página sigue el documento: sus capturas, sus diagramas y su texto.
   ========================================================================== */

/* ---------- hero ---------- */

.seats--hero { margin-bottom: clamp(20px, 2.4vw, 28px); display: inline-block; }
/* el título del documento, entre el gancho y la promesa */
.hero__claim {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.9vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
  font-weight: 500;
  color: var(--bone);
  margin-bottom: clamp(16px, 1.8vw, 22px);
  max-width: 24ch;
}
.hero__lede b { color: var(--bone); font-weight: 500; }

/* ---------- los tres pilares, en una línea ---------- */

.pillars {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(36px, 4.5vw, 56px);
}
.pillars span {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 0.88rem;
  color: var(--bone-dim);
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
.pillars span:hover { border-color: var(--accent); color: var(--bone); }
}

/* ---------- diagramas: van sobre papel, no sobre el negro ---------- */

.plate {
  margin: clamp(28px, 3.4vw, 44px) 0 0;
  background: #f3f0ea;
  border-radius: var(--r);
  padding: clamp(10px, 1.2vw, 16px);
  box-shadow: var(--lift);
  max-width: 560px;
}
/* las capturas de la plataforma van contenidas: son un apoyo, no la portada */
.plate--sm { max-width: 380px; }
.plate--wide { max-width: 560px; }
.plate img { width: 100%; height: auto; border-radius: 6px; }
.plate figcaption {
  margin-top: 10px;
  font-size: 0.8rem;
  color: #6c6862;
  text-align: center;
}

/* ---------- muros de prueba ---------- */

.proof { display: grid; gap: 14px; margin-top: clamp(34px, 4vw, 54px); }
.proof--four { grid-template-columns: repeat(4, 1fr); }
.proof--six { grid-template-columns: repeat(3, 1fr); }
.proof--three { grid-template-columns: repeat(3, 1fr); }

.shot {
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-2);
  box-shadow: var(--lift-hi);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.shot img { width: 100%; height: auto; display: block;}

@media (hover: hover) and (pointer: fine) {
.shot:hover { transform: translateY(-6px) scale(1.012); border-color: rgba(91, 155, 216, 0.4); box-shadow: var(--lift), var(--lift-hi); }
}
.shot--wide { margin-top: 14px; max-width: 420px; }
.shot--ui img { object-fit: cover; }

@media (max-width: 900px) {
  .proof--four { grid-template-columns: repeat(2, 1fr); }
  .proof--six, .proof--three { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .proof--four, .proof--six, .proof--three { grid-template-columns: 1fr 1fr; gap: 10px; }
  .proof--three { grid-template-columns: 1fr; }
}

/* ---------- profesional A y profesional B ---------- */

.ab { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(34px, 4vw, 52px); }
.ab__col {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(26px, 3vw, 38px);
  display: grid;
  gap: 16px;
  align-content: start;
  box-shadow: var(--lift-hi);
}
.ab__col--a { color: #5f7183; }
.ab__col--a .ab__who { color: #5f7183; }
.ab__col--b { background: var(--accent-soft); border-color: rgba(91, 155, 216, 0.26); }
.ab__col--b .ab__who { color: var(--accent); }
.ab__who { font-size: 0.86rem; letter-spacing: 0.02em; }
.ab__say {
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.ab__col--b .ab__say { color: var(--bone); }
.ab__what { font-size: 0.95rem; color: var(--bone-dim); line-height: 1.55; }
.ab__col--a .ab__what { color: #5f7183; }
.ab__pick { margin-top: clamp(28px, 3vw, 40px); color: var(--bone-dim); max-width: 62ch; }
.ab__pick b { color: var(--bone); font-weight: 500; }

@media (max-width: 760px) { .ab { grid-template-columns: 1fr; } }

/* ---------- la frase que gira el argumento ---------- */

.turn {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.7vw, 2.05rem);
  line-height: 1.24;
  letter-spacing: -0.016em;
  max-width: 34ch;
  margin-top: clamp(30px, 3.5vw, 46px);
  margin-bottom: 18px;
}
.turn b { color: var(--accent); font-weight: 500; }

/* ---------- las cinco razones ---------- */

.reasons { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.reason {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: clamp(16px, 3vw, 40px);
  padding-block: clamp(34px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.reason__n { font-size: 0.95rem; color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 500; padding-top: 0.45em; }
.reason__body { display: grid; gap: 16px; }
.reason__h {
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.9vw, 2.25rem);
  letter-spacing: -0.018em;
  font-weight: 500;
  line-height: 1.12;
  max-width: 26ch;
}

@media (max-width: 700px) {
  .reason { grid-template-columns: 1fr; gap: 10px; }
  .reason__n { padding-top: 0; }
}

/* ---------- dos columnas de lista ---------- */

.two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.5vw, 56px); margin-top: 10px; }
.two--cards { margin-top: clamp(34px, 4vw, 52px); }
.two__t { font-size: 0.86rem; color: var(--accent); margin-bottom: 14px; }

@media (max-width: 720px) { .two { grid-template-columns: 1fr; gap: 32px; } }

.ticks { display: grid; gap: 11px; }
.ticks li {
  position: relative;
  padding-left: 26px;
  font-size: 0.97rem;
  color: var(--bone-dim);
  line-height: 1.5;
}
.ticks li b { color: var(--bone); font-weight: 500; }
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  border: 1px solid var(--accent);
  transition: background-color 0.4s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
.ticks li:hover::before { background: var(--accent); }
}
.ticks--sm li { font-size: 0.9rem; padding-left: 22px; }
.ticks--sm li::before { width: 6px; height: 6px; top: 0.56em; }
.ticks--wide { margin-top: 26px; max-width: 62ch; }

.pack {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(26px, 3vw, 38px);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--lift-hi);
}

/* ---------- fases: nota al pie de la tarjeta ---------- */

.phase__note {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  color: var(--accent);
}
.phase .ticks { margin-top: 4px; }


/* ==========================================================================
   LOS TRES PILARES
   El diagrama está dibujado en la propia página, no es una foto. Al elegir un
   pilar, su círculo se enciende y los otros dos se apagan: el texto y el
   dibujo son la misma cosa.
   ========================================================================== */

.venn {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  margin-top: clamp(40px, 5vw, 64px);
}

.venn__list { display: grid; gap: 10px; }

.pil {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 18px;
  align-items: start;
  text-align: left;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r);
  padding: clamp(18px, 2.2vw, 26px);
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
.pil:hover, .pil.is-on { background: rgba(238, 243, 248, 0.03); border-color: var(--line); }
}

.pil__dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  margin-top: 0.42em;
  border: 1px solid currentColor;
  transition: background-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.pil__dot[data-c="a"] { color: #7ab2e6; }
.pil__dot[data-c="b"] { color: #77d8c4; }
.pil__dot[data-c="c"] { color: #dfc083; }
.pil.is-on .pil__dot { background: currentColor; box-shadow: 0 0 18px -2px currentColor; }

.pil__body { display: grid; gap: 8px; }
.pil__name {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -0.012em;
  font-weight: 500;
  line-height: 1.1;
}
.pil__say { color: var(--bone-dim); font-size: 0.98rem; line-height: 1.5; }

/* el detalle solo aparece cuando el pilar está elegido */
.pil__more {
  display: grid;
  grid-template-rows: 0fr;
  color: var(--bone-faint);
  font-size: 0.94rem;
  line-height: 1.55;
  transition: grid-template-rows 0.5s var(--ease), opacity 0.4s var(--ease);
  opacity: 0;
}
.pil__more > * { overflow: hidden; }
.pil.is-on .pil__more { grid-template-rows: 1fr; opacity: 1; padding-top: 6px; }

.venn__art { position: relative; }
.venn__art svg { width: 100%; height: auto; overflow: visible; }

.venn__g { transition: opacity 0.5s var(--ease); }
.venn__c {
  stroke-width: 1.2;
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
  transform-origin: center;
  transform-box: fill-box;
}
.venn__t {
  font-family: var(--display);
  font-size: 25px;
  font-weight: 600;
  fill: var(--bone);
  text-anchor: middle;
  letter-spacing: 0.005em;
  transition: fill 0.5s var(--ease);
}
.venn__brand {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 600;
  fill: var(--bone);
  text-anchor: middle;
  letter-spacing: 0.2em;
}
.venn__brand--sm { font-size: 15px; letter-spacing: 0.34em; fill: var(--bone-dim); }

/* con un pilar elegido, los otros dos se retiran */
.venn.is-picking .venn__g { opacity: 0.22; }
.venn.is-picking .venn__g.is-on { opacity: 1; }
.venn.is-picking .venn__g.is-on .venn__c { transform: scale(1.045); }
.venn.is-picking .venn__core { opacity: 0.35; transition: opacity 0.5s var(--ease); }

@media (max-width: 900px) {
  .venn { grid-template-columns: 1fr; gap: 36px; }
  .venn__art { order: -1; max-width: 460px; margin-inline: auto; }
}


/* ==========================================================================
   LAS CAPTURAS, DENTRO DE UN MÓVIL
   Son historias de Instagram: se ven en un teléfono, no recortadas sobre un
   fondo. El marco está dibujado en CSS, con bisel, isla y reflejo de pantalla.
   ========================================================================== */

.phone {
  position: relative;
  border-radius: 34px;
  padding: 7px;
  background: linear-gradient(155deg, #3b4b5e 0%, #1b2836 26%, #0c151f 62%, #263442 100%);
  box-shadow:
    0 26px 60px -28px rgba(0, 0, 0, 0.95),
    0 2px 0 rgba(238, 243, 248, 0.09) inset,
    0 -2px 0 rgba(0, 0, 0, 0.5) inset;
  cursor: zoom-in;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
.phone:hover {
    box-shadow:
      0 34px 70px -26px rgba(0, 0, 0, 0.95),
      0 0 0 1px rgba(91, 155, 216, 0.4),
      0 2px 0 rgba(238, 243, 248, 0.12) inset;
  }
}

.phone__screen {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: #05080c;
  aspect-ratio: 1000 / 1778;
}
.phone__screen img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* la isla superior, como en el teléfono real */
.phone__island {
  position: absolute;
  top: 2.2%;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 2.1%;
  min-height: 9px;
  border-radius: 999px;
  background: #05080c;
}

/* el reflejo diagonal del cristal */
.phone__glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg,
    rgba(238, 243, 248, 0.16) 0%,
    rgba(238, 243, 248, 0.05) 16%,
    transparent 34%,
    transparent 100%);
  transition: opacity 0.6s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
.phone:hover .phone__glare { opacity: 0.45; }
}


/* ==========================================================================
   VIDA DENTRO DEL MÓVIL
   La captura se desplaza despacio, como si alguien estuviera mirándola, y las
   métricas suben. Las cifras son las que aparecen en la propia captura: no hay
   ninguna inventada.
   ========================================================================== */

.phone__screen { isolation: isolate; }
.phone__screen img { transform: translateY(0); }

@media (prefers-reduced-motion: no-preference) {
  .phone__screen img {
    height: 118%;
    animation: phoneScroll 22s cubic-bezier(0.5, 0, 0.5, 1) infinite alternate;
    animation-play-state: paused;
  }
  .phone.is-live .phone__screen img { animation-play-state: running; }
  @keyframes phoneScroll {
    0%, 8%    { transform: translateY(0); }
    92%, 100% { transform: translateY(-15.2%); }
  }
}

/* la barra de métricas, sobre el cristal */
.meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 4px;
  padding: 10px 8px calc(10px + 2%);
  background: linear-gradient(transparent, rgba(3, 7, 13, 0.78) 42%);
  color: #eef3f8;
  pointer-events: none;
}
.meta__i {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: clamp(0.58rem, 0.82vw, 0.72rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.meta__i svg { width: 1.15em; height: 1.15em; flex: none; opacity: 0.9; }
.meta__n { font-weight: 500; }

/* un latido en el corazón cada vez que sube */
@media (prefers-reduced-motion: no-preference) {
  .phone.is-live .meta__i:nth-child(2) svg { animation: beat 3.4s var(--ease) infinite; }
  @keyframes beat {
    0%, 82%, 100% { transform: scale(1); }
    88% { transform: scale(1.28); }
    94% { transform: scale(0.96); }
  }
}

/* ---------- el carrusel en perspectiva ---------- */

.deck { margin-top: clamp(40px, 5vw, 64px); }

.deck__stage {
  position: relative;
  height: clamp(420px, 52vw, 560px);
  perspective: 1500px;
  perspective-origin: 50% 45%;
  touch-action: pan-y;
  cursor: grab;
}
.deck__stage:active { cursor: grabbing; }

.deck__item {
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(200px, 25vw, 268px);
  margin-left: calc(clamp(200px, 25vw, 268px) / -2);
  margin-block: 0;
  transform-style: preserve-3d;
  transition: transform 0.75s var(--ease), opacity 0.75s var(--ease), filter 0.75s var(--ease);
}
.deck__item .phone { transition: box-shadow 0.55s var(--ease); }

.deck__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: clamp(20px, 2.6vw, 32px);
}
.deck__cap {
  font-size: 0.9rem;
  color: var(--bone-dim);
  text-align: center;
  min-width: 18ch;
  max-width: 42ch;
}
.deck__nav {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: none;
  color: var(--bone-dim);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease);
}
.deck__nav svg { width: 19px; height: 19px;}

@media (hover: hover) and (pointer: fine) {
.deck__nav:hover { border-color: var(--accent); color: var(--bone); transform: scale(1.08); }
}
.deck__nav:active { transform: scale(0.94); }


/* ---------- el dato que acompaña al carrusel ---------- */

.deck { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.deck__read { align-self: center; }
.deck__n {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.055em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--bone);
}
/* La palabra va casi tan grande como la cifra: «+100.000» solo no dice nada,
   «+100.000 seguidores» si. Baja de cuerpo pero tambien de peso, para que la
   jerarquia la marque la escala y no el grosor. */
.deck__u {
  margin-top: 4px;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: clamp(1.5rem, 2.9vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 400;
  color: var(--bone);
}
.deck__sub { margin-top: 16px; color: var(--bone-dim); font-size: 1rem; line-height: 1.5; max-width: 24ch; }

@media (prefers-reduced-motion: no-preference) {
  .deck__read.is-new .deck__n { animation: numIn 0.7s var(--ease) both; }
  .deck__read.is-new .deck__u { animation: numIn 0.7s var(--ease) 0.06s both; }
  .deck__read.is-new .deck__sub { animation: numIn 0.7s var(--ease) 0.12s both; }
  @keyframes numIn {
    0% { opacity: 0; transform: translateY(14px); filter: blur(7px); }
    100% { opacity: 1; transform: none; filter: blur(0); }
  }
}

.deck__bar { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .deck { grid-template-columns: 1fr; gap: 24px; }
  .deck__read { text-align: center; }
  .deck__sub { margin-inline: auto; }
  .deck__u { margin-inline: auto; }
}

/* ---------- la barra fija con el CTA ---------- */

.dock {
  position: fixed;
  left: 50%;
  bottom: clamp(14px, 2.4vw, 26px);
  z-index: 55;
  transform: translate(-50%, 140%);
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  padding: 10px 10px 10px clamp(18px, 2.2vw, 26px);
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(9, 19, 32, 0.82);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.95);
  transition: transform 0.6s var(--ease), opacity 0.5s var(--ease);
  opacity: 0;
  max-width: calc(100vw - 32px);
}
.dock.is-up { transform: translate(-50%, 0); opacity: 1; }
.dock__t { font-size: 0.9rem; color: var(--bone-dim); white-space: nowrap; }
.dock__t b { color: var(--bone); font-weight: 500; }

@media (max-width: 520px) {
  .dock { gap: 10px; padding-left: 16px; width: calc(100vw - 28px); justify-content: space-between; }
  .dock__t { font-size: 0.8rem; white-space: normal; }
}

/* ---------- la pared de móviles ---------- */

.wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.6vw, 34px);
  margin-top: clamp(40px, 5vw, 64px);
  perspective: 1600px;
}
.wallitem { margin: 0; }
/* las filas se escalonan: una pared plana parece un mosaico, no un muro */
.wallitem:nth-child(2) { transform: translateY(26px); }
.wallitem:nth-child(3) { transform: translateY(52px); }
.wallitem:nth-child(5) { transform: translateY(26px); }
.wallitem:nth-child(6) { transform: translateY(52px); }
.wallitem--solo { max-width: 300px; margin: clamp(34px, 4vw, 56px) auto 0; }

@media (max-width: 900px) {
  .wall { grid-template-columns: repeat(2, 1fr); }
  .wallitem:nth-child(n) { transform: none; }
  .wallitem:nth-child(even) { transform: translateY(30px); }
}
@media (max-width: 520px) {
  .wall { grid-template-columns: 1fr 1fr; gap: 14px; }
  .phone { border-radius: 26px; padding: 5px; }
  .phone__screen { border-radius: 22px; }
}

/* ---------- la ventana para ampliar ---------- */

/* ⚠️ El atributo hidden tiene que ganar a este display:grid. Sin esta regla
   la ventana queda tendida sobre toda la página, invisible pero tragándose
   todos los clics: los enlaces del menú dejan de funcionar. */
.zoom[hidden] { display: none !important; }

.zoom {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(3, 7, 12, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.zoom.is-open { opacity: 1; }
.zoom__box {
  margin: 0;
  display: grid;
  gap: 16px;
  justify-items: center;
  max-height: 100%;
  transform: scale(0.94);
  transition: transform 0.45s var(--ease);
}
.zoom.is-open .zoom__box { transform: none; }
.zoom__img {
  max-height: min(84vh, 900px);
  width: auto;
  border-radius: 18px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.95);
}
.zoom__cap { font-size: 0.9rem; color: var(--bone-dim); text-align: center; max-width: 46ch; }
.zoom__close {
  position: absolute;
  top: clamp(14px, 2.4vw, 28px);
  right: clamp(14px, 2.4vw, 28px);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(5, 10, 17, 0.6);
  color: var(--bone);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.zoom__close svg { width: 20px; height: 20px;}

@media (hover: hover) and (pointer: fine) {
.zoom__close:hover { border-color: var(--accent); transform: rotate(90deg); }
}


/* ==========================================================================
   LA VIEJA FORMA Y LA NUEVA
   Las dos columnas son idénticas en forma para que se comparen de un vistazo:
   mismo ancho, mismas fichas, misma altura. Lo único que cambia es el color.
   ========================================================================== */

.oldnew {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(16px, 2.4vw, 34px);
  margin-top: clamp(40px, 5vw, 64px);
}

.oldnew__side {
  display: grid;
  gap: 14px;
  align-content: start;
  justify-items: stretch;
  text-align: center;
  padding: clamp(26px, 3.2vw, 40px) clamp(20px, 2.6vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-2);
  box-shadow: var(--lift-hi);
}

.oldnew__title {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  letter-spacing: -0.012em;
  font-weight: 500;
  margin-bottom: 4px;
}

.oldnew__items { display: grid; gap: 8px; }
.oldnew__items li {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.98rem;
  border: 1px solid rgba(var(--no), 0.22);
  background: rgba(var(--no), 0.055);
  color: #93a3b4;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
.oldnew__items li:hover { transform: translateY(-2px); border-color: rgba(var(--no), 0.45); }
}

.oldnew__lead {
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid rgba(var(--no), 0.38);
  background: rgba(var(--no), 0.1);
  color: rgba(var(--no), 0.92);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  font-size: 1.02rem;
}

.oldnew__items--new li {
  border-color: rgba(var(--si), 0.3);
  background: rgba(var(--si), 0.07);
  color: var(--bone);
  position: relative;
}

@media (hover: hover) and (pointer: fine) {
.oldnew__items--new li:hover { border-color: rgba(var(--si), 0.55); }
}
/* el signo + entre fichas, dibujado por CSS: sin elementos de relleno */
.oldnew__items--new li + li::before {
  content: '+';
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, 1px);
  font-size: 0.8rem;
  line-height: 8px;
  color: rgba(var(--si), 0.7);
}

.oldnew__vs {
  align-self: center;
  font-family: var(--display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--bone-faint);
  letter-spacing: 0.06em;
}
.oldnew__vs span {
  display: grid;
  place-items: center;
  width: clamp(44px, 5vw, 58px);
  height: clamp(44px, 5vw, 58px);
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--ink);
}

.oldnew__mark {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.8rem;
  color: var(--bone-faint);
  margin-top: 8px;
}
.oldnew__mark sup { font-size: 0.6em; letter-spacing: 0; }

@media (max-width: 760px) {
  .oldnew { grid-template-columns: 1fr; }
  .oldnew__vs { justify-self: center; }
}

/* ---------- el flujo de las cinco fases ---------- */

.flow { display: grid; gap: 0; max-width: 340px; margin-top: 6px; }
.flow__step {
  position: relative;
  padding: 13px 18px;
  border-radius: 8px;
  border: 1px solid currentColor;
  font-size: 0.97rem;
  text-align: center;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.flow__step span { color: var(--bone);}

@media (hover: hover) and (pointer: fine) {
.flow__step:hover { transform: translateX(4px); box-shadow: 0 0 24px -10px currentColor; }
}
.flow__step[data-c="a"] { color: #7ab2e6; background: rgba(122, 178, 230, 0.1); }
.flow__step[data-c="b"] { color: #77d8c4; background: rgba(119, 216, 196, 0.1); }
.flow__step[data-c="c"] { color: #dfc083; background: rgba(223, 192, 131, 0.1); }
.flow__step[data-c="d"] { color: #a79ce6; background: rgba(167, 156, 230, 0.1); }
.flow__step[data-c="e"] { color: #e0a58c; background: rgba(224, 165, 140, 0.1); }

/* la flecha que une un paso con el siguiente */
.flow__step + .flow__step { margin-top: 26px; }
.flow__step + .flow__step::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: 26px;
  background: var(--line-strong);
}
.flow__step + .flow__step::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: 1px;
  transform: translateX(-50%);
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 5px solid var(--line-strong);
}


/* ==========================================================================
   EL REFLEJO: ROJO DONDE NO, VERDE DONDE SÍ
   No son fondos de color, son reflejos que salen de detrás de la tarjeta. El
   azul sigue siendo el único color de marca; estos dos solo dicen sí o no.
   ========================================================================== */

:root {
  --no: 214, 88, 74;
  --si: 74, 186, 138;
}

.glow { position: relative; isolation: isolate; }
.glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
  pointer-events: none;
}
.glow--no::before {
  background: radial-gradient(70% 80% at 24% 0%, rgba(var(--no), 0.2), transparent 64%);
  box-shadow: 0 0 42px -10px rgba(var(--no), 0.32);
}
.glow--si::before {
  background: radial-gradient(70% 80% at 76% 0%, rgba(var(--si), 0.2), transparent 64%);
  box-shadow: 0 0 42px -10px rgba(var(--si), 0.34);
}
.glow.is-in::before { opacity: 1;}

@media (hover: hover) and (pointer: fine) {
.glow--no:hover::before, .glow--si:hover::before { opacity: 1; filter: brightness(1.35); }
}

/* la línea de arriba marca el lado sin necesidad de leer */
.glow::after {
  content: '';
  position: absolute;
  top: 0;
  left: clamp(18px, 4%, 40px);
  right: clamp(18px, 4%, 40px);
  height: 1px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.9s var(--ease) 0.2s;
}
.glow--no::after { background: linear-gradient(90deg, rgba(var(--no), 0.75), transparent); }
.glow--si::after { background: linear-gradient(90deg, rgba(var(--si), 0.75), transparent); }
.glow.is-in::after { transform: scaleX(1); }

/* los textos del lado que no funciona, en frío; los del que sí, en verde */
.versus__col--no .versus__h { color: rgba(var(--no), 0.85); }
.versus__col--si .versus__h { color: rgba(var(--si), 0.9); }
.fit__card:not(.fit__card--yes) .fit__h { color: rgba(var(--no), 0.85); }
.fit__card--yes .fit__h { color: rgba(var(--si), 0.9); }
.fit__card:not(.fit__card--yes) .fit__list li::before { border-color: rgba(var(--no), 0.6); }
.fit__card--yes .fit__list li::before { background: rgba(var(--si), 0.85); border-color: rgba(var(--si), 0.85); }
.fit__card--yes { background: rgba(var(--si), 0.045); border-color: rgba(var(--si), 0.22); }
.ab__col--a .ab__who { color: rgba(var(--no), 0.8); }
.ab__col--b .ab__who { color: rgba(var(--si), 0.9); }
.ab__col--b { background: rgba(var(--si), 0.045); border-color: rgba(var(--si), 0.22); }
.oldnew__side--old .oldnew__title { color: rgba(var(--no), 0.8); }
.oldnew__side--new .oldnew__title { color: rgba(var(--si), 0.9); }
.oldnew__lead {
  background: rgba(var(--no), 0.1);
  border-color: rgba(var(--no), 0.3);
  color: rgba(var(--no), 0.85);
}


/* ---------- la plataforma, dentro de una ventana de ordenador ----------
   Las historias van en móvil y la formación va en pantalla de ordenador.
   El marco está dibujado, no es parte de la captura. */

.win {
  margin: clamp(26px, 3.2vw, 42px) 0 0;
  max-width: 560px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: #0c1622;
  box-shadow: var(--lift), var(--lift-hi);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
.win:hover { transform: translateY(-4px); box-shadow: 0 30px 66px -28px rgba(0, 0, 0, 0.95), var(--lift-hi); }
}

.win__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: linear-gradient(#16222f, #101a26);
  border-bottom: 1px solid var(--line);
}
.win__bar i { width: 9px; height: 9px; border-radius: 999px; background: rgba(238, 243, 248, 0.16); }
.win__bar i:first-child { background: rgba(var(--no), 0.55); }
.win__bar i:nth-child(2) { background: rgba(223, 192, 131, 0.5); }
.win__bar i:nth-child(3) { background: rgba(var(--si), 0.5); }

.win img { width: 100%; height: auto; display: block; }
.win figcaption { padding: 12px 14px; font-size: 0.8rem; color: var(--bone-faint); text-align: center; border-top: 1px solid var(--line); }

/* la fila de tres ventanas bajo el plan: mismo alto, mismo recorte y una
   ligera inclinación que las ordena en vez de dejarlas sueltas */
.proof--three { grid-template-columns: repeat(3, 1fr); align-items: start; gap: clamp(14px, 1.8vw, 22px); }
.proof--three .win {
  margin-top: 0;
  max-width: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
/* escalonadas, y la del centro un poco por delante: ordena sin girar nada */
.proof--three .win:nth-child(1) { transform: translateY(22px); }
.proof--three .win:nth-child(2) { transform: scale(1.04); z-index: 2; }
.proof--three .win:nth-child(3) { transform: translateY(22px);}

@media (hover: hover) and (pointer: fine) {
.proof--three .win:hover { transform: translateY(0) scale(1.05); z-index: 3; }
}
.proof--three .win img { height: 100%; object-fit: cover; object-position: 50% 0; aspect-ratio: 16 / 11; }

@media (max-width: 900px) {
  .proof--three { grid-template-columns: 1fr; }
  .proof--three .win { --ry: 0deg; }
}

/* ---------- lo que no hacemos ---------- */

.nots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: clamp(36px, 4.4vw, 56px);
}
.not {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(24px, 2.8vw, 34px);
  display: grid;
  gap: 12px;
  align-content: start;
  box-shadow: var(--lift-hi);
}
.not__h {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.1vw, 1.55rem);
  letter-spacing: -0.012em;
  font-weight: 500;
  color: rgba(var(--no), 0.9);
  padding-left: 30px;
  position: relative;
}
/* la cruz, dibujada: no es un carácter ni un emoji */
.not__h::before,
.not__h::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.52em;
  width: 15px;
  height: 1.5px;
  border-radius: 2px;
  background: rgba(var(--no), 0.75);
}
.not__h::before { transform: rotate(45deg); }
.not__h::after { transform: rotate(-45deg); }
.not__p { color: var(--bone-dim); font-size: 0.97rem; line-height: 1.55; }

@media (max-width: 760px) { .nots { grid-template-columns: 1fr; } }


/* ==========================================================================
   COLOR EN LAS CIFRAS Y EN LAS FASES
   Mismo lenguaje que el diagrama de los pilares: un halo de color detrás y
   una línea fina del mismo tono. El texto se queda en blanco.
   ========================================================================== */

:root {
  --c1: 122, 178, 230;   /* azul del haz */
  --c2: 119, 216, 196;   /* verde agua */
  --c3: 223, 192, 131;   /* dorado */
  --c4: 167, 156, 230;   /* violeta */
  --c5: 224, 165, 140;   /* terracota */
}

.figure {
  position: relative;
  padding: clamp(20px, 2.2vw, 28px) clamp(16px, 1.8vw, 24px);
  border-radius: var(--r);
  isolation: isolate;
  transition: transform 0.5s var(--ease);
}
.figure::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(85% 90% at 20% 0%, rgba(var(--c), 0.16), transparent 66%);
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
.figure.is-in::before { opacity: 1;}

@media (hover: hover) and (pointer: fine) {
.figure:hover { transform: translateY(-4px); }
}

@media (hover: hover) and (pointer: fine) {
.figure:hover::before { opacity: 1; filter: brightness(1.45); }
}

/* la línea de arriba se dibuja al entrar, como en el diagrama */
.figure::after {
  content: '';
  position: absolute;
  top: 0;
  left: clamp(16px, 1.8vw, 24px);
  right: 40%;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--c), 0.9), transparent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.9s var(--ease) 0.25s;
}
.figure.is-in::after { transform: scaleX(1); }

.figure:nth-child(1) { --c: var(--c1); }
.figure:nth-child(2) { --c: var(--c2); }
.figure:nth-child(3) { --c: var(--c3); }
.figure:nth-child(4) { --c: var(--c4); }

.figures { gap: clamp(10px, 1.4vw, 18px); }

/* ---------- las fases, cada una con su color ---------- */

.phase { position: relative; isolation: isolate; }
.phase::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(80% 70% at 18% 0%, rgba(var(--c), 0.13), transparent 62%);
  transition: opacity 0.5s var(--ease), filter 0.5s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
.phase:hover::before { filter: brightness(1.6); }
}

@media (hover: hover) and (pointer: fine) {
.phase:hover { border-color: rgba(var(--c), 0.45); }
}
.phase__i { color: rgb(var(--c)); }
.phase__note { color: rgb(var(--c)); border-top-color: rgba(var(--c), 0.22); }
.phase .ticks li::before { border-color: rgba(var(--c), 0.8);}

@media (hover: hover) and (pointer: fine) {
.phase .ticks li:hover::before { background: rgb(var(--c)); }
}

.pan__track .phase:nth-child(1) { --c: var(--c1); }
.pan__track .phase:nth-child(2) { --c: var(--c2); }
.pan__track .phase:nth-child(3) { --c: var(--c3); }
.pan__track .phase:nth-child(4) { --c: var(--c4); }
.pan__track .phase:nth-child(5) { --c: var(--c5); }


/* ==========================================================================
   LA PRUEBA, DENTRO DE UN SOLO MÓVIL
   Un teléfono se queda fijo y las historias van pasando dentro mientras el
   visitante baja. Seis capturas sueltas en una pared se leen como un mosaico;
   así se leen como lo que son: una detrás de otra, en un móvil.
   ========================================================================== */

.story {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(32px, 6vw, 96px);
  margin-top: clamp(40px, 5vw, 64px);
  align-items: start;
}

.story__stage {
  position: sticky;
  top: calc(var(--nav-h) + clamp(20px, 4vh, 54px));
  display: grid;
  justify-items: center;
  gap: 18px;
}

.phone--big { width: min(100%, 320px); }
.phone--big .phone__screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.035);
  transition: opacity 0.65s var(--ease), transform 0.9s var(--ease);
}
.phone--big .phone__screen img.is-on { opacity: 1; transform: none; }

/* los puntos dicen por cuántas historias vas */
.story__dots { display: flex; gap: 7px; }
.story__dots i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(238, 243, 248, 0.2);
  transition: background-color 0.45s var(--ease), transform 0.45s var(--ease);
}
.story__dots i.is-on { background: var(--accent); transform: scale(1.5); }

.story__steps { display: grid; }

.rstep {
  min-height: 56vh;
  display: grid;
  align-content: center;
  gap: 12px;
  padding-block: clamp(20px, 3vw, 36px);
  opacity: 0.32;
  transition: opacity 0.6s var(--ease);
}
.rstep.is-on { opacity: 1; }

.rstep__n {
  font-size: 0.82rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.rstep__h {
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.016em;
  font-weight: 500;
  max-width: 20ch;
}
.rstep__p { color: var(--bone-dim); font-size: 1.02rem; line-height: 1.55; max-width: 44ch; }

/* la línea que marca el paso activo */
.rstep { position: relative; padding-left: clamp(20px, 2.4vw, 32px); }
.rstep::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: var(--line);
}
.rstep::after {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  width: 1px;
  height: 0;
  background: var(--accent);
  transition: height 0.7s var(--ease);
}
.rstep.is-on::after { height: 64%; }

@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; gap: 28px; }
  .story__stage { position: sticky; top: calc(var(--nav-h) + 12px); z-index: 2; }
  .phone--big { width: min(62vw, 230px); }
  .rstep { min-height: 42vh; }
}

/* ==========================================================================
   MOVIMIENTO
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  .rise { opacity: 0; transform: translateY(20px); animation: rise 1s var(--ease) both; animation-delay: var(--d, 0ms); }
  @keyframes rise { to { opacity: 1; transform: none; } }

  .line:not(.line--rot) > span { transform: translateY(106%); animation: lineUp 1.05s var(--ease) both; animation-delay: var(--d, 0ms); }
  @keyframes lineUp { to { transform: none; } }

  /* cuatro entradas distintas: la forma de entrar dice algo de lo que entra */
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.85s var(--ease), transform 0.85s var(--ease),
      filter 0.85s var(--ease), clip-path 0.95s var(--ease);
    transition-delay: var(--d, 0ms);
  }
  .reveal--left { transform: translateX(-30px); }
  .reveal--right { transform: translateX(30px); }
  .reveal--blur { transform: translateY(14px) scale(0.985); filter: blur(12px); }
  .reveal--wipe { opacity: 1; transform: none; clip-path: inset(0 0 102% 0); }

  .reveal.is-in { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0); }

  .magnetic { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0); }
  .magnetic:active { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(0.97); }
}

/* --- líneas de tiempo de scroll nativas (Chrome y Edge) --- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    .progress { animation: grow linear both; animation-timeline: scroll(root block); }
    @keyframes grow { to { transform: scaleX(1); } }

    .manifesto__quote { view-timeline-name: --mq; view-timeline-axis: block; }
    .manifesto__quote span {
      color: rgba(238, 243, 248, 0.15);
      animation: light linear both;
      animation-timeline: --mq;
      animation-range: cover calc(22% + (var(--i) / var(--n)) * 34%) cover calc(30% + (var(--i) / var(--n)) * 34%);
    }
    @keyframes light { to { color: var(--bone); } }

    .pan { height: 230vh; view-timeline-name: --pan; view-timeline-axis: block; }
    .pan__sticky {
      position: sticky;
      top: 0;
      height: 100dvh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-block: 0;
    }
    /* width:max-content es imprescindible: sin él, el -100% del keyframe mide el
       ancho del contenedor y no el del carril, y el recorrido se queda en nada. */
    .pan__track {
      width: max-content;
      overflow: visible;
      scroll-snap-type: none;
      will-change: transform;
      animation: panX linear both;
      animation-timeline: --pan;
      animation-range: contain 0% contain 100%;
    }
    @keyframes panX { to { transform: translate3d(calc(-100% + 100vw - var(--gutter) * 2), 0, 0); } }

    .pan__bar { display: block; }
    .pan__bar i { animation: grow linear both; animation-timeline: --pan; animation-range: contain 0% contain 100%; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .progress { display: none; }
  .stack__card { position: static; }
}

/* ==========================================================================
   CAPA AUTHKIT · "catedral de cristal esmerilado a medianoche"
   ==========================================================================
   Va al final a propósito: es una capa que se apoya sobre el sistema anterior
   y lo corrige, para poder quitarla entera si hace falta.

   La referencia es AuthKit (WorkOS). Encaja porque su lienzo ya es azul
   medianoche, igual que el nuestro: no hay que cambiar de identidad, solo
   adoptar su gramática. Lo que trae:

   · una rejilla de plano técnico y un foco cónico como atmósfera de fondo
   · los bordes dejan de ser líneas sólidas y pasan a filo de cristal por dentro
   · la profundidad sale de un brillo interior más un halo, nunca de una sombra
   · cuatro escalones de texto en vez de tres
   · un solo vocabulario de radios: píldora, tarjeta, insignia, círculo
   · el acento se reserva al CTA principal
   ========================================================================== */

:root {
  /* los cuatro escalones de texto: titular → cuerpo → apagado → auxiliar */
  --ice: #d8ecf8;
  --frost: #d1e4fa;
  --moon: #c7d3ea;
  --fog: #9da7ba;

  /* el filo de cristal. Es 1px POR DENTRO, no un borde: es lo que hace que
     una superficie parezca un cristal iluminado y no una cartulina */
  --filo: rgba(186, 215, 247, 0.12);
  --filo-fuerte: rgba(186, 215, 247, 0.24);
  --rejilla: rgba(186, 215, 247, 0.06);

  /* la elevación, en tres capas: luz que entra por el canto de arriba,
     resplandor interior difuso y una caída oscura y fría por debajo */
  --alzado:
    inset 0 1px 1px rgba(216, 236, 248, 0.2),
    inset 0 24px 48px rgba(168, 216, 245, 0.06),
    0 24px 32px rgba(6, 6, 14, 0.7);
  --alzado-bajo:
    inset 0 1px 1px rgba(199, 211, 234, 0.12),
    inset 0 24px 48px rgba(199, 211, 234, 0.05);

  /* un único vocabulario de radios, y no hay más */
  --r-tarjeta: 16px;
  --r-insignia: 6px;
  --r-pildora: 999px;
}

/* ==========================================================================
   LA ATMÓSFERA
   Una rejilla de plano técnico bajo toda la página y un foco cónico arriba.
   Las dos capas van en pseudo-elementos fijos: no tocan el marcado y no
   entran en el flujo, así que no pueden descolocar nada.
   ========================================================================== */

html::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--rejilla) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rejilla) 1px, transparent 1px);
  background-size: 88px 88px;
  /* la rejilla se desvanece hacia los bordes: si llega hasta el filo de la
     pantalla deja de ser atmósfera y se convierte en un papel cuadriculado */
  -webkit-mask-image: radial-gradient(120% 90% at 50% 20%, #000 20%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 20%, #000 20%, transparent 78%);
}

/* El foco va ANCLADO al principio del documento, no fijo a la ventana: su
   trabajo es anclar la portada, y si acompaña hasta el pie se convierte en
   una columna clara permanente que lava el contenido de todas las secciones. */
html::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 86vh;
  z-index: 0;
  pointer-events: none;
  background:
    conic-gradient(at 50% -8%,
      transparent 44%,
      rgba(124, 145, 182, 0.22) 49%,
      rgba(124, 145, 182, 0.38) 50%,
      rgba(124, 145, 182, 0.22) 51%,
      transparent 56%),
    radial-gradient(60% 46% at 50% -6%, rgba(91, 155, 216, 0.16), transparent 70%);
}

/* el contenido se sube por encima de las dos capas */
body > * { position: relative; z-index: 1; }

/* ==========================================================================
   EL FILO DE CRISTAL
   Los bordes sólidos se cambian por un trazo interior. AuthKit lo dice sin
   matices: nunca un borde de color sólido, siempre el filo esmerilado.
   ========================================================================== */

.card,
.win,
.faq__wrap,
.reason,
.rstep,
.pill,
.btn,
.chip,
.note,
.panel,
.case,
.plan__card,
.stack__card {
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1px var(--filo), var(--alzado-bajo);
}

/* ==========================================================================
   EL VOCABULARIO DE RADIOS
   Había trece valores distintos. Ahora hay cuatro, y cada familia tiene el
   suyo: mezclar radios dentro de un mismo tipo de componente es lo que hace
   que una página parezca ensamblada y no diseñada.
   ========================================================================== */

.btn,
.pill,
.chip,
button,
.dock__cta { border-radius: var(--r-pildora); }

.card,
.win,
.faq__wrap,
.reason,
.rstep,
.note,
.panel,
.case,
.plan__card,
.stack__card,
figure img,
.story__img { border-radius: var(--r-tarjeta); }

.tag,
input,
textarea,
select { border-radius: var(--r-insignia); }

/* ==========================================================================
   LA JERARQUÍA DE TEXTO, EN CUATRO ESCALONES
   ========================================================================== */

body { color: var(--frost); }
.h1, .h2, .h3, .display, h1, h2, h3 { color: var(--ice); }
.body-dim { color: var(--moon); }
.micro, .fine, .caption, small, figcaption { color: var(--fog); }

/* ==========================================================================
   EL TITULAR DE PORTADA, CON EL DEGRADADO SKYWASH
   Solo aquí. AuthKit es explícito: nunca en cuerpo de texto ni en botones,
   solo en el display mayor de la página.
   ========================================================================== */

.hero__title {
  background: linear-gradient(0deg, #98c0ef 0%, #d8ecf8 62%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* el degradado recorta el texto, así que un text-shadow no se vería:
   el resplandor tiene que ir como sombra del bloque */
.hero__title { filter: drop-shadow(0 0 28px rgba(186, 207, 247, 0.22)); }

/* ==========================================================================
   EL RITMO DE SECCIÓN
   Cada apertura de sección lleva un filete que se desvanece, como la línea
   que flanquea los rótulos de AuthKit. Marca dónde empieza un bloque sin
   añadir ni una palabra.
   ========================================================================== */

.section .h2::before,
.section--tight .h2::before {
  content: '';
  display: block;
  width: clamp(120px, 18vw, 260px);
  height: 1px;
  margin-bottom: clamp(20px, 2.4vw, 30px);
  background: linear-gradient(90deg, var(--filo-fuerte), transparent);
}

/* ==========================================================================
   LA ESCASEZ DEL ACENTO
   Tercera referencia seguida que dice lo mismo: un solo color funcional, y
   reservado a la acción principal. Aquí el azul se queda en el CTA y en los
   enlaces; lo estructural pasa al filo y a los escalones de texto.
   ========================================================================== */

.btn--primary,
.dock__cta {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.28),
    0 0 28px -6px rgba(91, 155, 216, 0.55);
}

@media (hover: hover) and (pointer: fine) {
.btn--primary:hover,
  .dock__cta:hover {
    background: #6ba9e2;
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.34),
      0 0 40px -6px rgba(91, 155, 216, 0.75);
  }
}

/* los botones que no son la acción principal pierden el color y se quedan en
   cristal: es lo que hace que el único lleno signifique algo */
.btn:not(.btn--primary):not(.dock__cta) {
  background: rgba(186, 214, 247, 0.06);
  color: var(--frost);
  box-shadow: inset 0 0 0 1px var(--filo);
}

@media (hover: hover) and (pointer: fine) {
.btn:not(.btn--primary):not(.dock__cta):hover {
    background: rgba(186, 214, 247, 0.12);
    box-shadow: inset 0 0 0 1px var(--filo-fuerte);
  }
}

/* ==========================================================================
   LA BARRA, SOBRE CRISTAL
   ========================================================================== */

.nav,
.topbar,
header[class*="nav"] {
  box-shadow: inset 0 -1px 0 var(--filo);
  border-bottom-color: transparent !important;
}

@media (prefers-reduced-motion: reduce) {
  html::after { opacity: 0.6; }
}

/* ==========================================================================
   EL CARRUSEL, AHORA DE TRES
   Eran cuatro piezas a 268 px y las capturas no se leían. Con tres cabe
   dárselas más grandes, y cada imagen va recortada a la afirmación que
   sostiene en vez de ser la captura entera.
   ========================================================================== */

.deck--tres .deck__stage {
  height: calc(var(--pieza) * 1.75 + 66px);
  /* Con piezas de 340 px, la que se va al fondo asoma 116 px por la izquierda
     del escenario y el recorte la partia con un corte recto que se veia.
     `overflow-clip-margin` aleja esa linea del encuadre sin quitar el recorte:
     quien impide que la pagina se arrastre de lado sigue siendo el
     `overflow-x: clip` del <body>. */
  /* En pixeles planos a proposito: Chrome tira la declaracion entera si el
     valor lleva clamp() o var(). 220 px cubre lo que asoma la pieza del fondo
     en cualquier ancho; el que impide arrastrar la pagina de lado sigue
     siendo el `overflow-x: clip` del <body>, que recorta ya en el borde de la
     pantalla. */
  overflow-clip-margin: 220px;
}

/* El ancho de la pieza manda sobre todo lo demas: el telefono mide 1,75 veces
   su ancho de alto, y el escenario se dimensiona a partir de ahi. El segundo
   termino es el que impide que en un portatil bajito el bloque clavado no
   quepa en pantalla y el pie se quede fuera: 57svh - 100px es lo que sobra
   despues de la barra, el pie y la cabecera fija. */
.deck--tres { --pieza: max(200px, min(clamp(238px, 31vw, 340px), calc(57svh - 100px))); }

.deck--tres .deck__item {
  width: var(--pieza);
  margin-left: calc(var(--pieza) / -2);
}

/* con tres piezas el abanico se abre un punto más: si no, la del centro tapa
   demasiado a las de los lados y deja de leerse que hay tres pruebas */
.deck--tres .deck__cap { max-width: 44ch; }

/* el DM del cierre: era texto plano y decía qué hacer sin dejar hacerlo */
.closing__dm {
  color: var(--frost);
  border-bottom: 1px solid var(--filo-fuerte);
  padding-bottom: 2px;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
.closing__dm:hover { color: var(--ice); border-color: var(--accent); }
}

/* ==========================================================================
   LA PORTADA: EL TITULAR MANDA
   ==========================================================================
   Va después de la capa AuthKit porque corrige una cosa que aquella rompió.

   🔴 EL FALLO: `background-clip: text` con `color: transparent` puesto en el
   propio <h1> dejaba el titular INVISIBLE. El h1 no es un bloque de texto
   plano: cada línea vive dentro de una caja con `overflow: hidden` y la
   tercera lleva tres frases superpuestas en posición absoluta. El degradado
   se pinta sobre la caja del h1 y no llega a recortarse contra esos glifos.

   La solución es aplicar el degradado a CADA LÍNEA, que sí son bloques de
   texto simples. Si algún día se cambia la estructura del titular, hay que
   volver a mirar esto.
   ========================================================================== */

.hero__title {
  background: none;
  color: var(--ice);
  filter: none;
}

.hero__title .line > span,
.hero__title .rot__i {
  background: linear-gradient(0deg, #98c0ef 0%, #d8ecf8 58%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 🔴 EL RESPLANDOR NO PUEDE IR EN EL <h1>.
   Un `filter` convierte al elemento en el bloque contenedor de sus hijos
   posicionados en absoluto. Puesto en el h1, las tres frases que rotan dejaban
   de colgar de su propia línea —que es la que las recorta con overflow:hidden—
   y se salían de ella: se veían dos frases a la vez, una entrando por abajo
   mientras la otra aún no había terminado de irse.

   Va en cada línea, que son hojas del árbol y no contienen nada posicionado. */
.hero__title .line > span,
.hero__title .rot__i {
  filter: drop-shadow(0 0 26px rgba(186, 207, 247, 0.18));
}

/* ---------- más cuerpo y más presencia ----------
   Sube de tamaño y baja de interlineado a la vez: es la segunda mitad la que
   da la presencia. A 0,92 las líneas dejan de ser renglones sueltos y el
   titular se lee como un bloque. */

.hero__title {
  font-size: clamp(3.2rem, 8.6vw, 6.7rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  max-width: min(100%, 19ch);
}

/* el claim sube con él, para que no se quede descolgado */
.hero__claim { font-size: clamp(1.6rem, 3.2vw, 2.6rem); }

/* ==========================================================================
   LA PORTADA EN MÓVIL: MENOS TEXTO
   Antes había, por este orden: píldora, titular de tres líneas, claim, un
   párrafo de tres líneas y dos botones. Demasiado antes de poder respirar.
   ========================================================================== */

.hero__lede--corta { display: none; }

@media (max-width: 760px) {
  /* la versión corta sustituye al párrafo largo */
  .hero__lede--corta { display: block; }
  .hero__lede--larga { display: none; }

  /* el titular se lleva el sitio que deja el texto que sobra */
  .hero__title {
    font-size: clamp(2.9rem, 13vw, 3.9rem);
    line-height: 0.9;
    max-width: none;
    margin-bottom: 18px;
  }
  .hero__claim {
    font-size: clamp(1.35rem, 5.6vw, 1.7rem);
    max-width: 20ch;
    margin-bottom: 14px;
  }
  .hero__lede { font-size: 1.06rem; max-width: 26ch; margin-bottom: 26px; }

  /* un solo botón, a todo lo ancho: el secundario es ruido aquí */
  .hero__actions .btn--ghost { display: none; }
  .hero__actions .btn { width: 100%; }

  /* la escasez se lee mejor DESPUÉS de la promesa que antes de ella */
  .hero__inner { display: flex; flex-direction: column; align-items: flex-start; }
  .seats--hero { order: 9; margin-top: 22px; margin-bottom: 0; }

  .hero { min-height: auto; padding-block: clamp(36px, 9vw, 60px) clamp(44px, 10vw, 72px); }

  /* 🔴 Las frases que rotan llevan `white-space: nowrap` para que el ancho lo
     fije la más larga. En el móvil eso las saca de la pantalla: «Y así no
     llegan clientes.» no cabe en una línea a ningún tamaño legible. Aquí se
     las deja partir, y la copia invisible que sostiene la caja parte con
     ellas, así que el alto sigue cuadrando. */
  .hero__title .rot__sizer,
  .hero__title .rot__i { white-space: normal; }
}

@media (max-width: 420px) {
  .hero__title { font-size: clamp(2.6rem, 13.4vw, 3.4rem); }
}

/* ==========================================================================
   🔴 EL CARRUSEL 3D SE SALÍA DE LA PANTALLA
   Sus tarjetas se colocan en círculo, así que algunas quedan fuera del
   encuadre a propósito. Sin recorte, el móvil se podía arrastrar 79 px a la
   derecha. Va en `clip` y no en `hidden` porque `hidden` crearía un contexto
   de scroll y se llevaría por delante el `position: sticky` de la página.
   ========================================================================== */

.deck__stage { overflow-x: clip; }

/* la marca de la barra partía en dos renglones en cuanto el botón le comía
   el sitio: baja de cuerpo y de tracking, y no se parte */
@media (max-width: 460px) {
  .nav__brand { font-size: 0.98rem; letter-spacing: 0.08em; white-space: nowrap; }
  .nav .btn--sm { padding: 9px 16px; font-size: 0.84rem; }
}
   

/* ==========================================================================
   EL CARRUSEL LO PASA EL SCROLL, NO EL VISITANTE

   Natxo lo pidio asi: bajar con el raton tiene que ir pasando las tres
   capturas antes de que la pagina siga. El bloque se queda clavado en
   pantalla y los tres tramos invisibles de dentro marcan por cual toca. Es el
   mismo patron que la seccion de historias, que ya funcionaba.
   ========================================================================== */

.deck-pin {
  position: relative;
  /* Una pantalla para asentarse y algo menos de una por captura. Menos que
     esto y las capturas pasan a saltos; mas, y la seccion se hace larga. */
  height: 250svh;
  margin-top: clamp(40px, 5vw, 64px);
}

/* Los tres tramos parten en tercios exactos, pero NO la altura del bloque:
   la franja del centro de la pantalla solo recorre desde media pantalla por
   debajo del borde de arriba hasta media pantalla por encima del de abajo. Si
   los tramos cubren el bloque entero, la tercera captura no llega hasta el
   ultimo 5 % del recorrido. Por eso el sangrado de 50vh arriba y abajo. */
.deck-pin__pasos {
  position: absolute;
  left: 0;
  right: 0;
  top: 50vh;
  bottom: 50vh;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  pointer-events: none;
}

.deck-pin__fijo {
  position: sticky;
  top: var(--nav-h);
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
}
.deck-pin__fijo > .deck { width: 100%; margin-top: 0; }

/* Los puntos sustituyen a las flechas: ya no hay nada que pulsar, pero sigue
   haciendo falta saber que son tres y por cual vas. */
.deck__dots {
  display: flex;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.deck__dots li {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--filo-fuerte);
  transition: background 0.4s var(--ease), transform 0.4s var(--ease);
}
.deck__dots li.is-on { background: var(--bone); transform: scale(1.25); }

/* El pie se fue a la columna de lectura. Antes vivia en una barra bajo el
   escenario y ahi la tapaba la barra flotante del CTA, que va pegada al borde
   inferior de la pantalla: con el bloque clavado no era un solape de paso,
   era permanente. Ahora todo lo que se lee esta a la izquierda y las capturas
   a la derecha. */
.deck--tres .deck__cap {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--filo);
  text-align: left;
  min-width: 0;
  max-width: 34ch;
  font-size: 0.88rem;
  line-height: 1.55;
}
.deck--tres .deck__dots { margin-top: 20px; }

@media (max-width: 900px) {
  .deck--tres .deck__cap { text-align: center; margin-inline: auto; }
  .deck--tres .deck__dots { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  /* El bloque se sigue clavando —un sticky no marea a nadie y es la unica
     forma de que las tres capturas se vean— pero las piezas cambian de golpe,
     sin el giro de tres cuartos de segundo. */
  .deck__item,
  .deck__item .phone,
  .deck__dots li { transition: none; }
}


/* ==========================================================================
   ACABADO TÁCTIL · 21/09/2026

   Tres cosas que no se ven en una captura y se notan al primer dedo:

   1. El navegador pinta un recuadro gris encima de TODO lo que tocas. Es una
      superficie que no habíamos dibujado nosotros, así que llevaba el gris de
      fábrica encima de una página azul noche.
   2. Sin hover, el `:active` es la única señal de que la página te ha oído.
      Había cuatro reglas para cuarenta y tres elementos que se pulsan.
   3. El rebote del scroll en iOS enseñaba el fondo del navegador por arriba y
      por abajo, y el dock flotante se metía debajo de la barra del teléfono.
   ========================================================================== */

/* --- 1 · el destello de toque lo ponemos nosotros ------------------------ */

html {
  -webkit-tap-highlight-color: transparent;
}

/* --- 2 · respuesta al pulsar --------------------------------------------
   Emil: nada que se pulse puede quedarse quieto. Escala corta (0.97) y
   duración por debajo de 160 ms, que es donde deja de percibirse como retardo
   y se percibe como respuesta. Sale rápido, entra rápido: aquí el usuario no
   está decidiendo, está confirmando.                                        */

.pil,
.faq summary,
.phone[data-zoom],
.zoom__close,
.deck__dots li,
.dock__cta {
  transition: transform 140ms var(--ease-press, cubic-bezier(0.23, 1, 0.32, 1));
  touch-action: manipulation;
}

.pil:active,
.faq summary:active,
.deck__dots li:active,
.dock__cta:active {
  transform: scale(0.97);
}

/* la captura del móvil ya vive dentro de una perspectiva: escalarla entera la
   sacaría del plano, así que se hunde un pelo en vez de encogerse */
.phone[data-zoom]:active {
  transform: translateY(2px) scale(0.99);
}

/* el aspa de cerrar gira al pulsarse, no al rozarse: en táctil el hover no
   existe y este era el único botón que no daba ninguna señal */
.zoom__close:active {
  transform: rotate(90deg) scale(0.94);
}

/* los enlaces no escalan —desplazaría el texto de alrededor— pero sí bajan de
   opacidad, que es la señal equivalente para algo que no es una superficie */
.nav__links a:active,
.footer__links a:active,
.closing__dm:active {
  opacity: 0.62;
}

/* quitar el retardo de 300 ms que algunos navegadores siguen aplicando antes
   de decidir si el toque era un zoom. Es la mitad de la sensación de lentitud */
.btn,
.nav__brand,
.deck__nav,
a[href] {
  touch-action: manipulation;
}

/* --- 3 · los bordes de la pantalla -------------------------------------- */

/* el rebote del scroll ya no enseña el fondo del navegador detrás de la página */
html,
body {
  overscroll-behavior-y: none;
}

/* el dock flotante se sube por encima de la barra de gestos del teléfono */
.dock {
  bottom: calc(clamp(14px, 2.4vw, 26px) + env(safe-area-inset-bottom, 0px));
}

/* y la página respeta los lados en los móviles con muesca */
@supports (padding: env(safe-area-inset-left)) {
  body {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
}

/* --- 4 · sin movimiento, sigue habiendo respuesta ------------------------
   Reducir movimiento no es quitar la confirmación: se queda la opacidad y se
   va el desplazamiento.                                                     */

@media (prefers-reduced-motion: reduce) {
  .pil:active,
  .faq summary:active,
  .deck__dots li:active,
  .dock__cta:active,
  .phone[data-zoom]:active,
  .zoom__close:active {
    transform: none;
    opacity: 0.72;
  }
}


/* ==========================================================================
   MÓVIL · DIANAS DE TOQUE Y CUERPO DE TEXTO · 21/09/2026

   Medido con Chromium emulando un iPhone de 390 px. Dos problemas, los dos
   con número:

   · Seis elementos que se pulsan medían menos de 44 px de alto. El peor, los
     puntos del carrusel: 7 px. Con el dedo eso no se acierta, se acierta por
     casualidad.
   · Doce textos por debajo de 15 px, algunos a 12,8. En una pantalla que se
     lee a medio metro y en movimiento, eso no se lee: se adivina.

   Todo va dentro de la rama de móvil. El escritorio no se toca.
   ========================================================================== */

@media (max-width: 760px) {

  /* --- dianas de toque ---------------------------------------------------
     Se agranda el área, no el dibujo. Donde el elemento es pequeño a
     propósito —los puntos del carrusel— el área crece con un pseudo-elemento
     invisible centrado, así el punto sigue midiendo 7 px y el dedo tiene 44. */

  .nav__brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .nav .btn--sm {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .deck__dots li {
    position: relative;
  }
  .deck__dots li::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    /* alto completo para el pulgar; de ancho, el punto más su mitad de hueco
       a cada lado. Si se pusieran 44 px también de ancho, las áreas de dos
       puntos vecinos se solaparían y un toque al borde activaría el punto
       equivocado — que es peor que una diana pequeña. */
    width: calc(100% + 16px);
    height: 44px;
    transform: translate(-50%, -50%);
  }
  /* el contenedor necesita sitio para que las áreas no se pisen entre ellas */
  .deck__dots {
    gap: max(var(--dots-gap, 10px), 16px);
  }

  .closing__dm,
  .footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* --- cuerpo de texto ---------------------------------------------------
     Suelo de 15 px para lo secundario y 16 px para lo que de verdad se lee de
     seguido. No se toca la jerarquía: lo pequeño sigue siendo lo pequeño,
     solo deja de ser ilegible. */

  .figure__t,
  .deck__cap,
  .deck--tres .deck__cap,   /* gana a la regla de dos clases de mas arriba */
  .case__role,
  .win figcaption,
  .footer__inner p,
  .case__face p {
    font-size: 0.95rem;   /* 15,2 px */
    line-height: 1.5;
  }

  .case__meta,
  .phase__note,
  .ticks--sm li {
    font-size: 1rem;      /* 16 px — estos se leen de seguido */
    line-height: 1.55;
  }
}


/* ==========================================================================
   EL PLAN, EN MÓVIL: SE DESLIZA CON EL DEDO, NO CON EL SCROLL · 21/09/2026

   La sección de las cuatro fases se pinta en escritorio como un barrido
   horizontal movido por el scroll: el bloque se clava 230vh y las tarjetas
   pasan de lado. En una pantalla de 390 px eso se rompe de dos maneras:

   · Una tarjeta mide 312 px y el carril se mueve en continuo, así que NUNCA
     hay una tarjeta entera en pantalla. Se lee «ionamiento» y frases partidas
     por el borde izquierdo.
   · Son 230vh clavados, más de dos pantallas de scroll secuestrado para leer
     cuatro tarjetas. Con el dedo eso se percibe como que la página se ha
     quedado enganchada.

   Debajo de ese barrido ya existía lo correcto: `overflow-x: auto` con
   `scroll-snap`. Aquí simplemente se devuelve el mando al dedo.
   ========================================================================== */

@media (max-width: 760px) {

  /* fuera el carril clavado */
  .pan { height: auto; }

  .pan__sticky {
    position: static;
    height: auto;
    padding-block: clamp(56px, 7.5vw, 100px);
  }

  /* y vuelve el carrusel deslizable de la base */
  .pan__track {
    width: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    animation: none;
    transform: none;
    will-change: auto;
    /* la barra de scroll nativa sobra: la posición la dan las propias
       tarjetas asomando por el borde */
    scrollbar-width: none;
  }
  .pan__track::-webkit-scrollbar { display: none; }

  .phase {
    /* que asome la siguiente: sin ese trozo visible nadie sabe que se desliza */
    flex: 0 0 min(86vw, 360px);
    min-height: 0;
    scroll-snap-align: start;
  }

  /* la barra de progreso medía el avance del barrido, que ya no existe */
  .pan__bar { display: none; }
}

/* ==========================================================================
   EL DOCK, ANCLADO A LOS DOS LADOS · 21/09/2026

   Se salía 20 px por la derecha. La causa es `width: calc(100vw - 28px)`:
   `100vw` incluye la barra de scroll, así que no mide lo mismo que el ancho
   que el usuario ve, y el centrado por `translate(-50%)` se descuadra contra
   una referencia que no es la suya.

   Anclarlo con `left` y `right` quita la aritmética del medio: no hay 100vw,
   no hay centrado que calcular, y deja de importar si hay barra o muesca.
   El desplazamiento vertical —que es el que lo muestra y lo esconde— se
   conserva intacto.
   ========================================================================== */

@media (max-width: 520px) {
  .dock {
    left: 14px;
    right: 14px;
    width: auto;
    transform: translateY(140%);
  }
  .dock.is-up { transform: translateY(0); }
}

/* la etiqueta «Provisional» estaba a 10,2 px: por debajo del suelo de 11 px
   para texto funcional. Mientras esos huecos sigan ahí, que se lean */
.case__tag { font-size: max(0.7rem, 11px); }


/* ==========================================================================
   LA SECCIÓN DE PRUEBAS, EN MÓVIL · 21/09/2026

   El móvil de las capturas va `position: sticky` con FONDO TRANSPARENTE, y en
   una sola columna eso significa que los pasos le pasan por detrás: medido,
   tapaba los pasos 01 y 02. Lo que se leía era el titular partido por encima
   de una foto.

   No se quita el sticky —es lo que hace que la prueba siga delante mientras
   lees el paso al que corresponde— sino que se convierte en lo que tenía que
   haber sido: una BANDA OPACA. El texto pasa por debajo y se desvanece contra
   su borde, en vez de cruzarla por encima.

   La banda llega a los bordes con `--gutter`, el mismo token que usa `.shell`.
   Nada de `50vw`, que incluye la barra de scroll y fue justo lo que descuadró
   el dock.
   ========================================================================== */

@media (max-width: 900px) {

  .story { gap: 0; }

  .story__stage {
    position: sticky;
    top: var(--nav-h);
    z-index: 3;

    /* la banda, de borde a borde */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-block: 16px 14px;
    background: var(--ink);
  }

  /* el desvanecido bajo la banda: el texto se disuelve, no se corta */
  .story__stage::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 26px;
    background: linear-gradient(to bottom, var(--ink), transparent);
    pointer-events: none;
  }

  /* más pequeño: la banda no puede comerse media pantalla */
  .phone--big { width: min(42vw, 164px); }

  .story__stage { gap: 12px; }

  /* los pasos ya no necesitan 42vh cada uno: con la banda encima, lo que hace
     falta es que quepa uno entero debajo de ella */
  .rstep {
    min-height: 0;
    padding-block: 30px;
  }
  .rstep:first-child { padding-top: 22px; }

  /* atenuar los pasos que no tocan funciona en escritorio, donde se ven tres a
     la vez. En el móvil solo se ve uno y quedaba gris sin motivo */
  .rstep { opacity: 1; }
}


/* ==========================================================================
   FUERA EL SCROLL HORIZONTAL, Y QUE NO VUELVA · 21/09/2026

   Pedido por Natxo. No basta con arreglar el desbordamiento de hoy: lo que
   sigue son las defensas para que un elemento nuevo no lo reabra mañana.

   ⚠️ `overflow-x: hidden` NO se usa: crea un contexto de scroll y se lleva por
   delante todos los `position: sticky` de la página —el móvil de las pruebas,
   la barra de navegación, el dock—. `clip` recorta igual y no crea contexto.
   Ya estaba aprendido en el carrusel 3D; aquí se aplica a toda la página.
   ========================================================================== */

html,
body {
  overflow-x: clip;
  max-width: 100%;
}

/* --- las cuatro causas habituales de desbordamiento ---------------------- */

/* 1 · un hijo de grid o de flex no encoge por debajo de su contenido salvo que
       se le diga. Es la causa número uno de los desbordamientos que aparecen
       solo en pantallas estrechas */
.story,
.story__steps,
.pan__track,
.cases,
.versus,
.fit,
.team,
.two,
.ab {
  min-width: 0;
}
.story > *,
.story__steps > *,
.cases > *,
.versus > *,
.fit > *,
.team > *,
.two > *,
.ab > * {
  min-width: 0;
}

/* 2 · ningún medio se sale de su caja, pase lo que pase */
img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

/* 3 · una palabra larga —una URL, un correo— no empuja la columna */
p,
li,
h1, h2, h3, h4,
figcaption,
blockquote,
summary {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* 4 · las tablas y los bloques de código, si algún día los hay, scrollean
       ellos y no la página */
table,
pre {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* --- el plan: en móvil, uno debajo de otro ------------------------------
   Estaba como carrusel deslizable. Natxo ha pedido quitar el scroll
   horizontal, así que las cuatro fases se apilan y se leen bajando, que es
   como se lee todo lo demás de la página.                                   */

@media (max-width: 760px) {
  .pan__track {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    overflow-x: visible;
    scroll-snap-type: none;
    width: auto;
    animation: none;
    transform: none;
  }
  .phase {
    flex: initial;
    width: auto;
    min-height: 0;
    scroll-snap-align: none;
  }
}