/* Estilos de la landing pública de Nimbrook. CSS a mano y sin dependencias: la
   página es estática y se sirve sola. Los tokens son los de la aplicación
   (static/css/autodoc.css): tinta casi negra sobre papel cálido y un solo
   color, el ámbar, reservado a lo que hay que mirar. El gesto de la casa, el
   filo —un hilo de tinta con el arranque en ámbar en el borde de arriba—, va
   en lo que *es* un documento: las tarjetas de producto, las hojas del editor.

   Bloques: base y navegación · botones · fondos de sección · hero · demo
   (el escenario que avanza con el scroll, prefijo .stage-) · producto · cómo se hace · salidas ·
   despliegue · precios · contacto · pie ·
   animaciones · responsive. */

@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/space-grotesk-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  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: 'Space Grotesk';
  src: url('fonts/space-grotesk-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  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;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  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: 'Inter';
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  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 {
  color-scheme: dark;
  --tinta: #E6E4DF;
  --tinta-fuerte: #F5F4F1;
  --tinta-tenue: #252A35;
  --acento: #D89A3C;
  --acento-claro: #E8B564;
  --texto: #DAD8D3;
  --texto-medio: #BABEC6;
  --texto-suave: #9DA2AC;
  --texto-tenue: #888E9A;
  --fondo: #0F1217;
  --superficie: #171B22;
  --borde: #2A2F39;
  --borde-suave: #222731;
  --bien: #7ECBAF;
  --naranja: #F26A21;         /* el anillo de las capturas */
  --sobre-tinta: #12161F;     /* el texto sobre un relleno de --tinta */
  --sobre-acento: #12161F;    /* y sobre el ámbar */
  --marco: #181C24;           /* el marco de las ventanas oscuras (grabador, terminal) */

  /* Bandas oscuras */
  --panel: #12161F;
  --panel-2: #1B2230;
  --panel-texto: #E7E9EE;
  --panel-tenue: #9AA1B0;
  --panel-linea: rgba(255, 255, 255, 0.1);
  --panel-superficie: rgba(255, 255, 255, 0.04);

  --display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --radio-control: 999px;
  --radio-caja: 10px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --container: 1120px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.landing {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.mono { font-family: var(--mono); }
.container { width: min(var(--container), calc(100% - 48px)); margin: 0 auto; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 14px; background: var(--tinta); color: var(--sobre-tinta); border-radius: var(--radio-control); }
.skip-link:focus { left: 8px; }

/* Iconos: landing.js sustituye cada <i class="ic" data-icon> por su SVG. */
.ic { display: inline-flex; width: 1em; height: 1em; flex: none; vertical-align: -0.15em; }
.ic svg { width: 100%; height: 100%; }

.kbd {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid currentColor;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.8em;
  line-height: 1.5;
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Navegación
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(15, 18, 23, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde);
}
.nav-inner { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 20px; }
.brand img { height: 30px; width: auto; }
.nav-links { display: flex; gap: 4px; margin-left: 8px; }
.nav-links a, .footer-links a {
  padding: 8px 12px;
  border-radius: var(--radio-control);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--texto-medio);
  transition: color 0.2s, background 0.2s;
}
.nav-links a:hover { color: var(--tinta); background: var(--tinta-tenue); }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-control);
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-medio);
  background: var(--superficie);
}
.lang-toggle:hover { color: var(--tinta); border-color: var(--tinta); }

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--radio-control);
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.2s var(--ease), background 0.2s, border-color 0.2s, color 0.2s;
}
.btn:hover { transform: translateY(-1px); }
.btn-ghost { height: 38px; border-color: var(--borde); background: var(--superficie); color: var(--tinta); }
.btn-ghost:hover { border-color: var(--tinta); }
.btn-primary { background: var(--acento); color: var(--sobre-acento); }
.btn-primary:hover { background: var(--acento-claro); }
.btn-secondary { border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.btn-secondary:hover { border-color: #fff; }
/* Un tercer camino del hero, sin caja: un enlace con su flecha. */
.btn-link { padding: 0 6px; color: var(--panel-texto); }
.btn-link .ic { color: var(--acento); transition: transform 0.2s var(--ease); }
.btn-link:hover { color: #fff; }
.btn-link:hover .ic { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Secciones y fondos
   -------------------------------------------------------------------------- */
.section { position: relative; padding: 108px 0; }
.band { background: var(--panel); color: var(--panel-texto); }
.band .section-sub { color: var(--panel-tenue); }
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta);
}
.kicker::before { content: ""; width: 36px; height: 2px; background: var(--acento); }
.band .kicker { color: var(--panel-texto); }
h2 { font-size: clamp(30px, 4vw, 44px); max-width: 20ch; }
.section-sub { max-width: 62ch; margin-top: 18px; font-size: 17.5px; color: var(--texto-suave); }

/* Fondos de sección (img/bg-*.webp, generados con Higgsfield). Van en un
   ::before bajo el contenido (el de #demo, en su .stage-bg: la sección mide
   once pantallas y el fondo se queda con el escenario anclado), con una máscara arriba y abajo para que no se
   note el corte entre secciones; la versión -sm entra en móvil. */
.hero, #demo, #salidas, #despliegue, .contact-section { position: relative; isolation: isolate; }
.hero::before, #salidas::before, #despliegue::before, .contact-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--bg-webp);
  background-size: cover;
  background-position: var(--bg-pos, center);
  background-repeat: no-repeat;
  opacity: var(--bg-opacity, 0.8);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}
.hero::before { mask-image: linear-gradient(to bottom, #000 55%, rgba(0, 0, 0, 0.5) 80%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 55%, rgba(0, 0, 0, 0.5) 80%, transparent); }
/* Un velo de tinta por la izquierda: el texto del hero cae sobre las hojas
   más claras de la imagen y sin él pierde contraste. */
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to right, rgba(18, 22, 31, 0.92) 0%, rgba(18, 22, 31, 0.78) 40%, rgba(18, 22, 31, 0.25) 68%, transparent 100%); }
/* Cada fondo sale de la ampliación a 4K del original de Higgsfield en tres
   anchos (1280, 1920 y 2880) y dos formatos: AVIF de 10 bits, que no hace
   escalones en los degradados de tinta, y WebP para quien no lo lee. El
   navegador elige con image-set(): en escritorio, 1920 o 2880 según la
   densidad de la pantalla (2880 siempre por encima de 1920 px de ancho); en
   móvil, 1280 o 1920. Quien no entiende image-set() con type() se queda con
   el WebP de --bg-webp. */
.hero {
  --bg-webp: url("img/bg-hero-1920.webp");
  --bg: image-set(url("img/bg-hero-1920.avif") type("image/avif") 1x, url("img/bg-hero-2880.avif") type("image/avif") 2x, url("img/bg-hero-1920.webp") type("image/webp") 1x, url("img/bg-hero-2880.webp") type("image/webp") 2x);
  --bg-pos: center; --bg-opacity: 0.9;
}
#demo {
  --bg-webp: url("img/bg-papel-oscuro-1920.webp");
  --bg: image-set(url("img/bg-papel-oscuro-1920.avif") type("image/avif") 1x, url("img/bg-papel-oscuro-2880.avif") type("image/avif") 2x, url("img/bg-papel-oscuro-1920.webp") type("image/webp") 1x, url("img/bg-papel-oscuro-2880.webp") type("image/webp") 2x);
  --bg-opacity: 1;
}
#salidas {
  --bg-webp: url("img/bg-salidas-oscuro-1920.webp");
  --bg: image-set(url("img/bg-salidas-oscuro-1920.avif") type("image/avif") 1x, url("img/bg-salidas-oscuro-2880.avif") type("image/avif") 2x, url("img/bg-salidas-oscuro-1920.webp") type("image/webp") 1x, url("img/bg-salidas-oscuro-2880.webp") type("image/webp") 2x);
  --bg-pos: right center; --bg-opacity: 1;
}
#despliegue {
  --bg-webp: url("img/bg-despliegue-1920.webp");
  --bg: image-set(url("img/bg-despliegue-1920.avif") type("image/avif") 1x, url("img/bg-despliegue-2880.avif") type("image/avif") 2x, url("img/bg-despliegue-1920.webp") type("image/webp") 1x, url("img/bg-despliegue-2880.webp") type("image/webp") 2x);
  --bg-pos: center bottom; --bg-opacity: 0.85;
}
.contact-section {
  --bg-webp: url("img/bg-contacto-1920.webp");
  --bg: image-set(url("img/bg-contacto-1920.avif") type("image/avif") 1x, url("img/bg-contacto-2880.avif") type("image/avif") 2x, url("img/bg-contacto-1920.webp") type("image/webp") 1x, url("img/bg-contacto-2880.webp") type("image/webp") 2x);
  --bg-pos: center bottom; --bg-opacity: 1;
}
@media (min-width: 1921px) {
  .hero { --bg: image-set(url("img/bg-hero-2880.avif") type("image/avif") 1x, url("img/bg-hero-2880.webp") type("image/webp") 1x); }
  #demo { --bg: image-set(url("img/bg-papel-oscuro-2880.avif") type("image/avif") 1x, url("img/bg-papel-oscuro-2880.webp") type("image/webp") 1x); }
  #salidas { --bg: image-set(url("img/bg-salidas-oscuro-2880.avif") type("image/avif") 1x, url("img/bg-salidas-oscuro-2880.webp") type("image/webp") 1x); }
  #despliegue { --bg: image-set(url("img/bg-despliegue-2880.avif") type("image/avif") 1x, url("img/bg-despliegue-2880.webp") type("image/webp") 1x); }
  .contact-section { --bg: image-set(url("img/bg-contacto-2880.avif") type("image/avif") 1x, url("img/bg-contacto-2880.webp") type("image/webp") 1x); }
}
@supports (background-image: image-set(url("img/x.avif") type("image/avif") 1x)) {
  .hero::before, #salidas::before, #despliegue::before, .contact-section::before { background-image: var(--bg); }
}
/* Solo el hero se pide al cargar: el resto de fondos espera a que su sección
   se acerque a la pantalla (landing.js les pone .bg-in). Sin JavaScript no
   hay clase .js y se cargan todos, como siempre. */
.js #salidas:not(.bg-in)::before, .js #despliegue:not(.bg-in)::before, .js .contact-section:not(.bg-in)::before { background-image: none; }
/* Las salidas: la pila de manuales queda a la derecha y el texto a la
   izquierda; un velo de papel por la izquierda evita que se toquen. */
#salidas::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to right, #0F1217 0%, #0F1217 38%, rgba(15, 18, 23, 0.7) 52%, transparent 66%); }

/* Las secciones claras sin imagen llevan el patrón de la aplicación. */
#producto { background: var(--fondo) url("img/patron-oscuro.png") center / 512px repeat; }
#producto::after { content: ""; position: absolute; inset: 0; background: rgba(15, 18, 23, 0.55); pointer-events: none; }
#producto > .container { position: relative; z-index: 1; }
#produccion {
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 100% 56px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 56px 100%,
    var(--panel);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { background: var(--panel); color: var(--panel-texto); padding: 128px 0 118px; overflow: hidden; }
.hero-inner { max-width: 760px; }
h1 { font-size: clamp(38px, 6vw, 68px); color: #fff; }
.hero-sub { max-width: 640px; margin-top: 26px; font-size: 18px; color: var(--panel-tenue); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-stack { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 44px; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--panel-tenue); }
.hero-stack span::before { content: "▪"; margin-right: 8px; color: var(--acento); }

/* --------------------------------------------------------------------------
   Demo: un manual real, contado con el scroll
   El escenario se queda anclado en la ventana mientras la sección, que mide
   varias pantallas, pasa por debajo; landing.js convierte el scroll en el
   avance de seis capítulos. La ventana del navegador y la burbuja del
   recorrido son oscuras en los dos modos (son el navegador) y la hoja es
   papel, también en los dos.
   -------------------------------------------------------------------------- */
.demo-section { padding-top: 96px; }
.demo-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: end; }
.demo-head .section-sub { margin-top: 0; }

.stage {
  position: relative;
  margin-top: 28px;
  /* Una pantalla para que el ancla se quede quieta y un tramo de scroll por
     cada unidad de capítulo (los pesos van en data-weights). */
  min-height: calc(100svh + var(--stage-units, 6) * 82svh);
  --header-height: 69px;
  --stage-copy-band: 10.5rem;
  --stage-donde-band: 4.5rem;
  --stage-rail-band: 3rem;
  --stage-copy-gap: 0.75rem;
  --scene-h: calc(100svh - var(--header-height) - var(--stage-copy-band) - var(--stage-copy-gap) - var(--stage-donde-band) - var(--stage-rail-band));
  --stage-room: calc(100vw - 7rem);
  --scene-gap: clamp(1.5rem, 4vw, 3.5rem);
  /* El alto de la ventana es su página (1180/1888 del ancho) más la barra
     (0,064): el ancho es el alto disponible entre 0,689. */
  --browser-width: min(58rem, calc(var(--scene-h) / 0.689), calc(var(--stage-room) * 0.68));
  --sheet-width: min(24rem, calc(var(--scene-h) * 0.9 * 0.707), calc(var(--stage-room) * 0.28));
}
.stage-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  padding-top: var(--header-height);
  display: flex;
  flex-direction: column;
  /* Capa propia: sin ella Safari repinta el ancla un frame tarde y tiembla. */
  will-change: transform;
}
.stage-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--bg-webp);
  background-size: cover;
  background-position: var(--bg-pos, center);
  opacity: var(--bg-opacity, 0.8);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
@supports (background-image: image-set(url("img/x.avif") type("image/avif") 1x)) {
  .stage-bg { background-image: var(--bg); }
}
.js #demo:not(.bg-in) .stage-bg { background-image: none; }

/* La banda del texto: los seis capítulos apilados y colgados de abajo, para
   que la banda no cambie de alto y los marcos no salten. */
.stage-copy {
  position: relative;
  height: var(--stage-copy-band);
  margin-bottom: var(--stage-copy-gap);
  flex-shrink: 0;
  align-self: center;
  width: 100%;
  max-width: 46rem;
  padding: 0 1rem;
  text-align: center;
}
.stage-chapter {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0 1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.6rem);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), visibility 0s linear 0.5s;
  pointer-events: none;
}
.stage-chapter.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
/* En el escenario el número ya lo lleva el carril de abajo. */
.stage-num { display: none; margin-bottom: 0.6rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.22em; color: var(--acento); }
.stage.is-static .stage-num { display: block; }
.stage-chapter h3 { margin-bottom: 0.55rem; font-size: clamp(1.35rem, 2.6vw, 1.9rem); line-height: 1.2; color: var(--tinta); }
.stage-chapter p { font-size: 0.98rem; line-height: 1.65; color: var(--texto-suave); }

/* Dónde estamos: cuatro paradas fijas (la web externa, la extensión, la
   aplicación y la página pública), cada una con su color, y debajo la frase
   del momento. El marco de la ventana y el rótulo de su barra de direcciones
   llevan el color de lo que hay en la pestaña. */
.stage {
  --tono-devotion: #A79BFF;
  --tono-extension: #FF8A4C;
  --tono-nimbrook: #E8B564;
  --tono-publica: #7ECBAF;
  --tono-ventana: var(--tono-devotion);
}
.stage[data-ventana="extension"] { --tono-ventana: var(--tono-extension); }
.stage[data-ventana="nimbrook"] { --tono-ventana: var(--tono-nimbrook); }
.stage[data-ventana="publica"] { --tono-ventana: var(--tono-publica); }
.donde { height: var(--stage-donde-band); flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; padding: 0 0.75rem; }
.donde-sitios { display: flex; align-items: center; justify-content: center; list-style: none; margin: 0; padding: 0; }
.donde-sitio {
  --tono: var(--tono-devotion);
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  height: 2.25rem;
  padding: 0 0.85rem;
  border: 1px solid var(--borde);
  border-radius: 9999px;
  background: rgba(15, 18, 23, 0.82);
  font-size: 0.82rem;
  color: var(--texto-tenue);
  white-space: nowrap;
  opacity: 0.78;
  transition: opacity 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.donde-sitio[data-sitio="extension"] { --tono: var(--tono-extension); }
.donde-sitio[data-sitio="nimbrook"] { --tono: var(--tono-nimbrook); }
.donde-sitio[data-sitio="publica"] { --tono: var(--tono-publica); }
/* El hilo que las une. */
.donde-sitio + .donde-sitio { margin-left: 1.5rem; }
.donde-sitio + .donde-sitio::before { content: ""; position: absolute; top: 50%; left: calc(-1.5rem - 1px); width: 1.5rem; height: 1px; background: var(--borde); transition: background-color 0.35s var(--ease); }
.donde-sitio.is-done + .donde-sitio::before, .donde-sitio.is-active + .donde-sitio.is-active::before { background: var(--tono); }
.donde-sitio img { width: 1.15rem; height: 1.15rem; border-radius: 22%; }
.donde-sitio .ic { font-size: 1.05rem; color: var(--tono); }
.donde-nombre { font-weight: 600; }
.donde-tipo { font-size: 0.74rem; color: var(--texto-tenue); }
.donde-sitio.is-done { opacity: 0.9; }
.donde-sitio.is-active { opacity: 1; border-color: var(--tono); background: color-mix(in srgb, var(--tono) 16%, #0F1217); color: var(--tinta-fuerte, #fff); box-shadow: 0 0 22px -6px color-mix(in srgb, var(--tono) 70%, transparent); }
.donde-sitio.is-active .donde-tipo { color: var(--tono); }
/* Mientras graba, un punto que late junto a la extensión. */
.donde-rec { display: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--tono); }
.is-grabador .donde-sitio[data-sitio="extension"] .donde-rec { display: block; animation: donde-late 1.1s ease-in-out infinite; }
.is-grabador .donde-sitio[data-sitio="extension"] .ic { display: none; }
@keyframes donde-late { 50% { opacity: 0.25; transform: scale(0.7); } }
.donde-notas { position: relative; width: 100%; max-width: 46rem; height: 1.5rem; margin: 0; }
.donde-nota { position: absolute; inset: 0; font-size: 0.9rem; line-height: 1.5rem; text-align: center; color: var(--tinta); text-shadow: 0 0 6px #0B0E13, 0 0 2px #0B0E13; opacity: 0; visibility: hidden; transform: translateY(0.2rem); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s; }
.donde-nota.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.donde-nota b { font-weight: 600; color: var(--tono-extension); font-variant-numeric: tabular-nums; }

/* La escena: la ventana y la hoja, centradas; sin hoja, la ventana sola. */
.stage-scene {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--scene-gap);
  overflow-x: clip;
  overflow-y: visible;
}
.stage-source { position: relative; transition: transform 0.9s var(--ease), margin-bottom 0.85s var(--ease); }

/* El navegador: todo en unidades del contenedor, para que la barra y sus
   piezas guarden la proporción a cualquier tamaño. */
.browser {
  container-type: inline-size;
  width: var(--browser-width);
  max-width: 100%;
  flex-shrink: 0;
  border-radius: 0.9% / 1.4%;
  background: #17171a;
  box-shadow: 0 0 0 2px var(--tono-ventana), 0 0 44px -14px var(--tono-ventana), 0 34px 70px -22px rgba(0, 0, 0, 0.75);
  overflow: hidden;
  transition: box-shadow 0.45s var(--ease);
}
.browser-chrome {
  display: flex;
  align-items: center;
  gap: 2.2cqw;
  height: 6.4cqw;
  padding: 0 2.2cqw;
  background: linear-gradient(180deg, #26262a, #1c1c20);
  border-bottom: 1px solid rgba(0, 0, 0, 0.55);
}
.browser-lights { display: flex; gap: 0.9cqw; flex-shrink: 0; }
.browser-lights i { width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: #4a4a52; }
.browser-url {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 1.3cqw;
  height: 4.2cqw;
  padding: 0 0.6cqw;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 9999px;
  background: #0f0f12;
  font-size: 1.75cqw;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}
/* El rótulo de lo que hay en la pestaña, con su color: es lo primero que se
   mira de la barra. Como el que pone Chrome a las páginas de una extensión. */
.browser-chip { display: none; flex: none; align-items: center; gap: 0.7cqw; height: 3cqw; padding: 0 1.2cqw 0 0.7cqw; border-radius: 9999px; background: color-mix(in srgb, var(--tono-ventana) 20%, #0f0f12); font-weight: 600; color: var(--tono-ventana); }
.browser-chip.is-active { display: inline-flex; }
.browser-chip img { width: 2cqw; height: 2cqw; border-radius: 22%; }
.browser-chip .ic { font-size: 2cqw; }
.browser-dir { min-width: 0; font-family: var(--mono); letter-spacing: 0.01em; color: #a3a3aa; overflow: hidden; text-overflow: ellipsis; }
.browser-ext { position: relative; flex-shrink: 0; line-height: 0; }
.browser-ext img { display: block; width: 3.4cqw; height: 3.4cqw; border-radius: 22%; transition: box-shadow 0.3s var(--ease); }
/* Cuando el puntero va a abrir la extensión, y mientras graba. */
.browser-ext.is-llamada img { animation: ext-llama 0.9s ease-in-out infinite; }
.is-grabador .browser-ext img { box-shadow: 0 0 0 0.3cqw var(--tono-extension); }
@keyframes ext-llama {
  0%, 100% { box-shadow: 0 0 0 0.2cqw var(--tono-extension); }
  50% { box-shadow: 0 0 0 0.8cqw color-mix(in srgb, var(--tono-extension) 35%, transparent); }
}
/* El contador lo pinta el navegador sobre el icono, fuera de la página: por
   eso el grabador no deja rastro en las capturas. */
.browser-badge {
  position: absolute;
  right: -0.6cqw;
  bottom: -0.4cqw;
  min-width: 2cqw;
  padding: 0 0.4cqw;
  border-radius: 0.5cqw;
  background: var(--acento);
  color: #12161f;
  font-family: var(--mono);
  font-size: 1.35cqw;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
  box-shadow: 0 0 0 0.25cqw #1c1c20;
}
.browser-viewport { position: relative; width: 100%; aspect-ratio: 1888 / 1180; background: #0e0e10; overflow: hidden; }
.browser-viewport > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Las imágenes de la ventana, apiladas y fundidas de una a otra. */
.stage-shot { position: absolute; inset: 0; opacity: 0; transition: opacity 0.45s var(--ease); }
.stage-shot.is-active { opacity: 1; }
/* Las capturas del grabador no se encienden: el scroll las funde (landing.js,
   «La grabación»), así que no llevan transición propia. */
.stage-shot[data-shot] { transition: none; }
/* Las dos capturas más altas que la ventana: cuelgan de arriba con su alto
   y su capítulo las sube. */
.stage-scene .stage-scroll { position: absolute; inset: 0 0 auto; width: 100%; height: auto; max-width: none; }
.stage-publish { overflow: hidden; }
/* La cabecera y el índice de la página publicada son fijos: una copia
   recortada en L se queda quieta encima mientras el manual sube. */
.stage-scene .stage-publish-chrome {
  clip-path: polygon(0 0, 100% 0, 100% var(--pub-head, 0.7%), 18.889% var(--pub-head, 0.7%), 18.889% 100%, 0 100%);
  pointer-events: none;
}
.stage.is-reviewing [data-scroller="review"],
.stage.is-reading [data-scroller="publish"],
.stage.is-briefing .stage-brief { will-change: transform; }

/* El recorrido a documentar, grande, en la ventana donde va a pasar. */
.stage-brief {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 8cqw;
  background: #0e0e10;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
}
.stage-brief.is-active { opacity: 1; }
.brief-eyebrow, .brief-title, .brief-line, .brief-tail {
  opacity: 0;
  transform: translateY(1.1cqw);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.brief-eyebrow.is-in, .brief-title.is-in, .brief-line.is-in, .brief-tail.is-in { opacity: 1; transform: none; }
.brief-eyebrow { font-family: var(--mono); font-size: 1.5cqw; line-height: 1; letter-spacing: 0.3em; text-transform: uppercase; color: var(--acento); }
.brief-title { margin: 2.4cqw 0 4cqw; font-family: var(--display); font-size: 5.4cqw; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: #f2f2f4; }
.brief-list { display: flex; flex-direction: column; gap: 1.8cqw; list-style: none; }
.brief-line { display: flex; align-items: baseline; gap: 2cqw; }
.brief-line-num { flex-shrink: 0; font-family: var(--mono); font-size: 1.5cqw; line-height: 1; letter-spacing: 0.1em; color: var(--acento); }
.brief-line-text { font-size: 2.5cqw; line-height: 1.3; color: #d4d4d8; }
.brief-tail { margin-top: 4cqw; font-size: 1.9cqw; line-height: 1.45; color: #83838c; }
@container (max-width: 30rem) {
  .stage-brief { padding: 0 6cqw; }
  .brief-eyebrow, .brief-tail { display: none; }
  .brief-title { margin: 0 0 3.6cqw; font-size: 7.4cqw; line-height: 1.12; }
  .brief-list { gap: 2.2cqw; }
  .brief-line { gap: 2.4cqw; }
  .brief-line-num { font-size: 2.4cqw; }
  .brief-line-text { font-size: 4cqw; }
}

/* La ventana del grabador cuelga de la barra, bajo su icono. */
.stage-popup {
  position: absolute;
  top: 8%;
  right: 1.5%;
  width: 38%;
  max-width: 17rem;
  height: auto;
  border-radius: 0.75rem;
  box-shadow: 0 0 0 2px var(--tono-extension), 0 22px 46px -12px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(-0.6rem) scale(0.97);
  transform-origin: top right;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  pointer-events: none;
}
.stage-popup.is-active { opacity: 1; transform: none; }

/* La hoja. Sin ella en escena devuelve su sitio con un margen negativo y la
   fila, centrada, lleva la ventana al medio en el mismo tiempo. */
.stage-paper {
  position: relative;
  transition: margin-right 0.85s var(--ease), margin-bottom 0.85s var(--ease), opacity 0.55s var(--ease), transform 0.85s var(--ease);
}
.stage.is-solo .stage-paper {
  margin-right: calc(-1 * (var(--sheet-width) + var(--scene-gap)));
  opacity: 0;
  transform: translateX(2.5rem) rotate(2deg);
  pointer-events: none;
}
.sheet {
  container-type: inline-size;
  position: relative;
  width: var(--sheet-width);
  max-width: 100%;
  aspect-ratio: 210 / 297;
  flex-shrink: 0;
  border-radius: 2px;
  background: #fbfaf7;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 30px 60px -20px rgba(0, 0, 0, 0.8), 0 2px 10px -2px rgba(0, 0, 0, 0.5);
}
.paper-page { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s var(--ease); }
.paper-page.is-active { opacity: 1; }
/* La línea que escribe la portada al pasar del repaso al editor: ocupa la
   hoja entera para que el translate en % sea de su alto. */
.paper-scan { position: absolute; inset: 0; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.paper-scan::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--naranja);
  box-shadow: 0 0 14px 3px rgba(242, 106, 33, 0.45);
}

/* El manual a medio hacer: una raya donde irá el título y los pasos
   aterrizando debajo, con el recorte que calculó el grabador. */
.paper-build {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 4cqw;
  padding: 7cqw 7cqw 5cqw;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.paper-build.is-active { opacity: 1; }
.paper-rule { flex-shrink: 0; display: block; width: 62%; height: 1.4cqw; border-radius: 1cqw; background: #1b2230; }
.paper-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.4cqw 3cqw; align-content: start; list-style: none; }
.paper-step {
  display: flex;
  flex-direction: column;
  gap: 1.2cqw;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
/* El hueco del paso que se está grabando espera punteado, y la captura cae
   en él de golpe porque llega volando encima, en su sitio exacto. */
.paper-step.is-next, .paper-step.is-in { opacity: 1; }
.paper-step.is-next .paper-step-shot { border-style: dashed; border-color: rgba(27, 34, 48, 0.35); background: transparent; }
.paper-step:not(.is-in) .paper-step-shot > * { opacity: 0; }
.paper-step.is-next .paper-step-num { opacity: 0.45; }
.paper-step-num { font-family: var(--mono); font-size: 2cqw; line-height: 1; letter-spacing: 0.12em; color: var(--acento); }
.paper-step-shot {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--crop-ar, 1888 / 1180);
  overflow: hidden;
  border: 1px solid rgba(27, 34, 48, 0.3);
  background: #0e0e10;
}
.paper-step-shot img,
.paper-step-shot svg {
  position: absolute;
  left: var(--crop-x, 0);
  top: var(--crop-y, 0);
  width: var(--crop-w, 100%);
  height: var(--crop-h, 100%);
  max-width: none;
  object-fit: cover;
}

/* La grabación: el puntero de quien graba, la pulsación y, por cada paso, su
   captura despegándose de la página con el anillo y el velo que le pone
   Nimbrook (los de apps/documents/resaltes.py) y volando a su hueco de la
   hoja. Todo lo mueve el scroll con transform y opacity. */
.graba-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: calc(var(--browser-width) * 0.024);
  min-width: 11px;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.graba-cursor svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45)); transform-origin: 8% 4%; }
.graba-cursor path { fill: #fff; stroke: #15161a; stroke-width: 1.3; stroke-linejoin: round; }
.graba-pulsa {
  position: absolute;
  left: 0;
  top: 0;
  width: 280%;
  aspect-ratio: 1;
  margin: -140% 0 0 -140%;
  border: 2px solid var(--naranja);
  border-radius: 50%;
  opacity: 0;
}
.graba-vuelos { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.graba-vuelo {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform-origin: 0 0;
  will-change: transform, opacity;
}
.graba-vuelo .paper-step-shot {
  border: 0;
  border-radius: 3px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92), 0 26px 50px -14px rgba(0, 0, 0, 0.75);
}
.graba-vuelo svg { opacity: 0; }
.graba-vuelo .graba-anillo { transform-box: fill-box; transform-origin: center; }

/* Los formatos salen por el borde derecho de la hoja. */
.stage-fan { position: absolute; top: 14%; left: 100%; margin-left: 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; }
.stage-fan-card {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--borde);
  border-radius: 0.4rem;
  background: var(--superficie);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--texto-medio);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-2.5rem);
  transition: opacity 0.45s var(--ease), transform 0.6s var(--ease);
}
.stage-fan.is-open .stage-fan-card { opacity: 1; transform: none; }
.stage-fan.is-open [data-fan-card="1"] { transition-delay: 0.08s; }
.stage-fan.is-open [data-fan-card="2"] { transition-delay: 0.16s; }
.stage-fan.is-open [data-fan-card="3"] { transition-delay: 0.24s; }

/* Por dónde vas: los capítulos como un carril que se va llenando. */
.stage-rail { height: var(--stage-rail-band); flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0 1rem; list-style: none; }
.stage-rail-item { display: flex; align-items: center; gap: 0.5rem; opacity: 0.4; transition: opacity 0.4s var(--ease); }
.stage-rail-item.is-active, .stage-rail-item.is-done { opacity: 1; }
.stage-rail-num { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; color: var(--texto-tenue); }
.stage-rail-item.is-active .stage-rail-num { color: var(--acento); }
.stage-rail-track { display: block; width: clamp(1.5rem, 4vw, 3rem); height: 2px; background: var(--borde); overflow: hidden; }
.stage-rail-fill { display: block; height: 100%; background: var(--acento); transform: scaleX(0); transform-origin: left; will-change: transform; }

/* El manual de ejemplo, para abrirlo o descargarlo. */
.ejemplo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: 8px; padding: 22px 26px; border: 1px solid var(--borde); border-radius: 14px; background: var(--superficie); }
.ejemplo-texto { max-width: 52ch; font-size: 15.5px; color: var(--texto-medio); }
.ejemplo-enlaces { display: flex; flex-wrap: wrap; gap: 10px; }
.ejemplo-enlaces .btn-ghost { height: 44px; }

.sim-note {
  display: flex; align-items: flex-start; gap: 12px;
  max-width: 78ch; margin: 22px auto 0;
  font-size: 14.5px; line-height: 1.55; color: var(--texto-suave);
}
.sim-note .ic { flex: none; margin-top: 3px; font-size: 16px; color: var(--acento); }
.sim-note b { font-weight: 600; color: var(--tinta); }

/* Estrecho: la ventana ocupa la columna y la hoja se apoya en su esquina de
   abajo a la derecha, como una página impresa sobre la mesa. */
@media (max-width: 900px) {
  .stage {
    --stage-copy-band: clamp(15rem, 32svh, 16rem);
    --stage-rail-band: 3rem;
    --stage-copy-gap: 1rem;
    --browser-width: min(calc(100vw - 2rem), calc(var(--scene-h) * 0.62 / 0.689));
    --scene-gap: 0rem;
    --sheet-width: min(calc(var(--browser-width) * 0.5), calc((var(--scene-h) - var(--browser-width) * 0.689) * 1.1045));
    --sheet-out-y: 0.32;
  }
  .stage-scene { position: relative; flex-direction: column; }
  .stage-paper {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    margin-left: calc(var(--browser-width) / 2 - var(--sheet-width));
    margin-top: calc(var(--browser-width) * 0.689 / 2 - var(--sheet-width) * 1.4142 * (1 - var(--sheet-out-y)));
  }
  .stage:not(.is-solo) .stage-source { margin-bottom: calc(var(--sheet-width) * 1.4142 * var(--sheet-out-y)); }
  .stage.is-solo .stage-paper { margin-right: 0; transform: translateY(2rem) rotate(3deg); }
  /* Mientras se graba y se repasa, la hoja casi entera bajo la ventana, para
     no tapar lo que se pulsa; al editar vuelve a apoyarse en la esquina. */
  .stage.is-grabando { --sheet-width: min(calc(var(--browser-width) * 0.5), calc((var(--scene-h) - var(--browser-width) * 0.689) * 0.8)); }
  .stage.is-grabando:not(.is-solo) .stage-source { margin-bottom: calc(var(--sheet-width) * 1.4142 * 0.88); }
  .stage.is-grabando .stage-paper { margin-top: calc(var(--browser-width) * 0.689 / 2 - var(--sheet-width) * 1.4142 * (0.44 + 0.12)); }
  .stage-paper { transition: margin-right 0.85s var(--ease), margin-bottom 0.85s var(--ease), margin-top 0.85s var(--ease), margin-left 0.85s var(--ease), opacity 0.55s var(--ease), transform 0.85s var(--ease); }
  .sheet { transition: width 0.85s var(--ease); }
  .stage-popup { width: 44%; }
  /* La ventana se queda en la mitad de ancho: la barra de direcciones crece
     dentro de su alto para que el rótulo se siga leyendo. */
  .browser-url { gap: 1.5cqw; height: 5.2cqw; font-size: 2.7cqw; }
  .browser-chip { gap: 1cqw; height: 4.2cqw; padding: 0 1.6cqw 0 1cqw; }
  .browser-chip img { width: 2.8cqw; height: 2.8cqw; }
  .browser-chip .ic { font-size: 2.8cqw; }
  .donde-tipo { display: none; }
  .donde-sitio { gap: 0.35rem; height: 1.95rem; padding: 0 0.6rem; font-size: 0.74rem; }
  .donde-sitio + .donde-sitio { margin-left: 0.8rem; }
  .donde-sitio + .donde-sitio::before { left: calc(-0.8rem - 1px); width: 0.8rem; }
  .donde-sitio:not(.is-active) .donde-nombre { display: none; }
  .donde-notas { height: 2.5rem; }
  .donde-nota { font-size: 0.78rem; line-height: 1.25rem; }
  .stage-rail { gap: 0.55rem; padding: 0 0.5rem; }
  .stage { --stage-donde-band: 5rem; }
  .stage-rail-item { gap: 0.35rem; }
  .stage-rail-track { width: clamp(0.9rem, 3vw, 3rem); }
  .stage-chapter h3 { font-size: 1.25rem; }
  .stage-chapter p { font-size: 0.85rem; line-height: 1.55; }
  .stage-fan { top: 6%; left: auto; right: 100%; margin: 0 0.6rem 0 0; align-items: flex-end; gap: 0.35rem; }
  .stage-fan-card { transform: translateX(1.5rem); font-size: 0.6rem; padding: 0.25rem 0.5rem; }
}
@media (max-width: 380px) {
  .stage-chapter h3 { font-size: 1.12rem; }
  .stage-chapter p { font-size: 0.8rem; line-height: 1.45; }
}
/* Un móvil apaisado: sobra ancho y falta alto, así que vuelven a ir lado a
   lado y las bandas se encogen. */
@media (max-height: 620px) and (orientation: landscape) {
  .stage {
    --header-height: 69px;
    --stage-copy-band: 7.75rem;
    --stage-donde-band: 2rem;
    --stage-rail-band: 2.5rem;
    --stage-copy-gap: 0.4rem;
    --browser-width: min(26rem, calc(var(--scene-h) * 0.92 / 0.689));
    --sheet-width: min(11rem, calc(var(--scene-h) * 0.9 * 0.707));
    --scene-gap: 1.5rem;
  }
  .stage-scene { flex-direction: row; }
  .stage-paper { position: static; margin-left: 0; margin-top: 0; }
  .stage:not(.is-solo) .stage-source { margin-bottom: 0; }
  .stage.is-solo .stage-paper { margin-bottom: 0; margin-right: calc(-1 * (var(--sheet-width) + var(--scene-gap))); transform: translateX(2rem) rotate(2deg); }
  .donde { flex-direction: row; justify-content: center; }
  .donde-notas { display: none; }
  .donde-sitio { height: 1.75rem; }
  .stage-chapter h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
  .stage-chapter p { font-size: 0.78rem; line-height: 1.5; }
  .stage-num { margin-bottom: 0.35rem; }
  .stage-fan { top: 8%; left: 100%; right: auto; margin: 0 0 0 0.6rem; align-items: flex-start; gap: 0.5rem; }
  .stage-fan-card { transform: translateX(-1.5rem); }
  .stage.is-grabando { --sheet-width: min(11rem, calc(var(--scene-h) * 0.9 * 0.707)); }
  .stage.is-grabando .stage-paper { margin-top: 0; }
  .stage.is-grabando:not(.is-solo) .stage-source { margin-bottom: 0; }
}
/* Reducir movimiento: sin ancla ni montaje; una imagen fija con la ventana
   y la hoja, y los capítulos como texto debajo. */
.stage.is-static {
  min-height: 0;
  --browser-width: min(38rem, calc(100vw - 12rem));
  --sheet-width: min(14rem, calc((100vw - 12rem) * 0.32));
}
.stage.is-static .stage-pin { position: static; height: auto; padding: 2rem 0 3rem; }
.stage.is-static .stage-scene { order: -1; flex: none; flex-direction: row; position: static; align-items: flex-end; margin-bottom: 3rem; }
.stage.is-static .stage-paper { position: static; margin: 0; }
.stage.is-static .stage-source { margin-bottom: 0; }
.stage.is-static .stage-copy { height: auto; max-width: var(--container); text-align: left; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 32px; }
.stage.is-static .stage-chapter { position: static; opacity: 1; visibility: visible; transform: none; padding: 0 0 1.75rem; }
.stage.is-static .stage-chapter h3 { font-size: 1.2rem; }
.stage.is-static .stage-rail { display: none; }
.stage.is-static .donde { order: -2; height: auto; margin-bottom: 1.5rem; }
.stage.is-static .donde-rec { animation: none; }
.stage.is-static .paper-scan,
.stage.is-static .graba-cursor, .stage.is-static .graba-vuelos { display: none; }
@media (max-width: 900px) {
  .stage.is-static { --browser-width: calc(100vw - 2rem); --sheet-width: 0px; }
  .stage.is-static .stage-paper { display: none; }
}

.t-dim { color: #7C8496; }

/* --------------------------------------------------------------------------
   Producto
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 18px; margin-top: 44px; }
.features { grid-template-columns: repeat(4, 1fr); }
.feature {
  position: relative;
  padding: 26px 24px 28px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-caja);
  background: var(--superficie);
  box-shadow: 0 18px 44px -36px rgba(18, 22, 31, 0.35);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.feature:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -34px rgba(18, 22, 31, 0.45); }
/* El filo: hilo de tinta arriba, con el arranque en ámbar. */
.feature::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--tinta); border-radius: var(--radio-caja) var(--radio-caja) 0 0; }
.feature::after { content: ""; position: absolute; left: -1px; top: -1px; width: 56px; height: 3px; background: var(--acento); border-top-left-radius: var(--radio-caja); }
.feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--tinta-tenue); color: var(--tinta); font-size: 19px; }
.feature h3 { margin-top: 18px; font-size: 17px; }
.feature p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--texto-suave); }
.feature p a { font-weight: 600; color: var(--tinta); text-decoration: underline; text-decoration-color: var(--acento); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.feature p a:hover { text-decoration-color: var(--tinta); }
.band .feature { background: var(--panel-superficie); border-color: var(--panel-linea); box-shadow: none; }
.band .feature h3 { color: #fff; }
.band .feature p { color: var(--panel-tenue); }
.band .feature-icon { background: rgba(255, 255, 255, 0.08); color: var(--acento); }

/* --------------------------------------------------------------------------
   Cómo se hace
   -------------------------------------------------------------------------- */
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 44px; }
.way { display: flex; flex-direction: column; gap: 22px; padding: 28px; border: 1px solid var(--panel-linea); border-radius: 14px; background: var(--panel-superficie); }
.way-head { display: flex; gap: 18px; align-items: flex-start; }
.way-head .feature-icon { flex: none; background: rgba(255, 255, 255, 0.08); color: var(--acento); }
.way h3 { font-size: 20px; color: #fff; }
.way p { margin-top: 8px; font-size: 14.5px; color: var(--panel-tenue); }
.ways-foot { margin-top: 22px; font-size: 14px; color: var(--panel-tenue); }
.ways-foot .mono { color: var(--acento); }

.rec-card { margin-top: auto; border: 1px solid var(--panel-linea); border-radius: 10px; background: #0E1118; overflow: hidden; font-size: 13px; }
.rec-top { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--panel-linea); color: #fff; font-weight: 600; }
.rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #E5484D; animation: pulse 1.4s infinite; }
.rec-count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--naranja); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.rec-list { list-style: none; padding: 8px 0; }
.rec-list li { display: flex; align-items: center; gap: 12px; padding: 6px 14px; color: #C9CDD6; }
.rec-n { width: 20px; height: 20px; border-radius: 50%; border: 1px solid #3A4358; font-size: 10.5px; display: inline-flex; align-items: center; justify-content: center; color: #8B93A6; font-family: var(--mono); }
.rec-foot { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--panel-linea); font-size: 12px; color: #8B93A6; }
.rec-foot span:last-child { margin-left: 6px; }

.term-card { margin-top: auto; border: 1px solid var(--panel-linea); border-radius: 10px; background: #0E1118; overflow: hidden; font-family: var(--mono); font-size: 12.5px; line-height: 1.8; color: #D8DCE6; white-space: pre-wrap; }
.term-card code { display: block; padding: 0 16px 14px; }
.term-titlebar { display: flex; align-items: center; gap: 7px; height: 38px; margin: 0 -16px 8px; padding: 0 14px; background: #161A24; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-family: var(--mono); font-size: 11.5px; color: #8B93A6; }
.term-title { margin-left: 8px; }
.c-cm { color: #7C8496; }
.c-str { color: #E8B564; }
.c-ok { color: #4ADE80; }

/* --------------------------------------------------------------------------
   Salidas
   -------------------------------------------------------------------------- */
.salidas-copy { max-width: 560px; }
.salidas-copy .section-sub { max-width: 50ch; }
.outputs { list-style: none; margin-top: 34px; display: grid; gap: 10px; }
.outputs li { display: grid; grid-template-columns: 74px 1fr; gap: 16px; align-items: start; padding: 14px 18px; border: 1px solid var(--borde); border-radius: var(--radio-caja); background: rgba(23, 27, 34, 0.86); backdrop-filter: blur(4px); }
.out-fmt { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--tinta); padding: 4px 0; border-top: 2px solid var(--tinta); position: relative; }
.out-fmt::before { content: ""; position: absolute; left: 0; top: -2px; width: 26px; height: 2px; background: var(--acento); }
.out-desc { font-size: 14px; color: var(--texto-suave); }

/* --------------------------------------------------------------------------
   Despliegue
   -------------------------------------------------------------------------- */
.deploy { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; margin-top: 44px; align-items: start; }
.steps { list-style: none; display: grid; gap: 26px; }
.step { display: grid; grid-template-columns: 52px 1fr; gap: 16px; }
.step-n { font-family: var(--mono); font-size: 13px; color: var(--acento); padding-top: 5px; }
.step h3 { font-size: 19px; color: #fff; }
.step p { margin-top: 6px; font-size: 14.5px; color: var(--panel-tenue); }
.stack-card { position: sticky; top: 96px; border: 1px solid var(--panel-linea); border-radius: 12px; background: #0E1118; overflow: hidden; }
.stack-card .term-titlebar { margin: 0; }
.stack-body { padding: 10px 16px 14px; }
.stack-row { display: grid; grid-template-columns: 20px 74px 1fr auto; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-family: var(--mono); font-size: 12.5px; }
.stack-row .ic { color: var(--acento); font-size: 15px; }
.stack-name { color: #fff; }
.stack-desc { color: #8B93A6; font-family: var(--sans); font-size: 12.5px; }
.stack-status { color: #4ADE80; font-size: 11.5px; }
.stack-foot { padding-top: 12px; font-size: 12.5px; }
.t-dim { color: #8B93A6; }

/* --------------------------------------------------------------------------
   Precios
   Banda de tinta con las tarjetas de los planes. La destacada es la única
   en papel: el ojo va a ella sin necesidad de más color. Las pestañas y el
   conmutador anual / mensual los mueve landing.js.
   -------------------------------------------------------------------------- */
#precios {
  background:
    radial-gradient(ellipse 60% 50% at 85% 0%, rgba(216, 154, 60, 0.09), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 100% 56px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 56px 100%,
    var(--panel);
}
.plans-bar { scroll-margin-top: 96px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 40px; }
/* Individual / Equipo va pegado al de la modalidad, y el pago, al otro lado. */
.plans-bar .seg--sub { margin-right: auto; }

/* El conmutador segmentado: en la banda, la opción activa es papel. */
.seg { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--panel-linea); border-radius: var(--radio-control); background: rgba(255, 255, 255, 0.04); }
.seg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 18px; border-radius: var(--radio-control); font-size: 14px; font-weight: 600; color: var(--panel-tenue); transition: background 0.25s var(--ease), color 0.2s; }
.seg-btn:hover { color: #fff; }
.seg-btn .ic { font-size: 15px; }
.seg-btn.is-active { background: var(--tinta); color: var(--sobre-tinta); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.5); }
.seg-btn.is-active .ic { color: var(--acento); }
.seg-btn:focus-visible, .switch:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
/* Con JavaScript, la opción activa no se pinta a sí misma: debajo corre una
   pastilla (landing.js la coloca) que se desliza de una opción a otra. */
.seg.has-thumb { position: relative; }
.seg-thumb { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: var(--radio-control); background: var(--tinta); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.5); transition: transform 0.42s var(--ease), width 0.42s var(--ease); pointer-events: none; }
.seg.has-thumb .seg-btn { position: relative; z-index: 1; }
.seg.has-thumb .seg-btn.is-active { background: transparent; box-shadow: none; }
.seg-btn .ic { transition: color 0.2s; }

.billing { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--panel-texto); }
.switch { position: relative; width: 42px; height: 24px; border-radius: var(--radio-control); background: rgba(255, 255, 255, 0.2); transition: background 0.25s; }
.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); transition: transform 0.25s var(--ease); }
.switch.is-on { background: var(--acento); }
.switch.is-on::after { transform: translateX(18px); }
.billing-save { padding: 2px 9px; border-radius: var(--radio-control); background: rgba(216, 154, 60, 0.16); font-size: 12px; font-weight: 700; color: var(--acento-claro); transition: opacity 0.25s; }
.billing:not(.is-anual) .billing-save { opacity: 0.4; }

.plans { display: grid; gap: 20px; margin-top: 28px; }
.plans--nube { grid-template-columns: repeat(3, 1fr); }
.plans--casa { grid-template-columns: 1fr; }
/* Equipo es una sola tarjeta: va en el hueco de Pro, en medio. */
.plans--uno > .plan { grid-column: 2; }
.plans + .plans, .plans-grupo + .plans { margin-top: 56px; } /* sin JavaScript se ven todas las tablas seguidas */
.plans[hidden] + .plans, .plans-grupo[hidden] + .plans { margin-top: 28px; }
/* La tarjeta puente sigue a la tabla de Individual o a la de Equipo. */
.plans + .plans--puente, .plans[hidden] + .plans--puente { margin-top: 20px; }

/* El cambio de pestaña (landing.js): el escenario anima su altura y, mientras
   tanto, recorta por abajo lo que aún no cabe, con holgura arriba y a los
   lados para la etiqueta y la sombra de las tarjetas. Lo que sale se aparta
   hacia el lado contrario de la opción; lo que entra llega desde el suyo,
   tarjeta a tarjeta. */
.plans-escena { display: flow-root; }
.plans-escena.is-moving { transition: height 0.48s var(--ease); clip-path: inset(-32px -64px -40px -64px); }
.is-saliendo { opacity: 0; transform: translateX(calc(var(--dir, 1) * -18px)); transition: opacity 0.16s ease-in, transform 0.16s ease-in; }
.is-entrando { animation: plan-entra 0.52s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes plan-entra {
  from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 28px)) scale(0.985); }
  to { opacity: 1; transform: none; }
}
/* Los conmutadores que vuelven con la nube (Individual / Equipo y el pago). */
.is-volviendo { animation: conmutador-vuelve 0.4s var(--ease) both; }
@keyframes conmutador-vuelve {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 28px 28px;
  border: 1px solid var(--panel-linea);
  border-radius: 14px;
  /* Opaca: el mismo tono que el velo sobre la banda, pero sin dejar ver la cuadrícula. */
  background: linear-gradient(var(--panel-superficie), var(--panel-superficie)), var(--panel);
}
/* El filo de la casa, en versión banda: hilo claro con el arranque en ámbar.
   Es el borde superior de una caja con la misma curva que la card, para que
   se afine en las esquinas en vez de asomar por fuera de ellas. */
.plan::before, .plan::after { content: ""; position: absolute; inset: -1px; border-top: 3px solid rgba(255, 255, 255, 0.16); border-radius: 14px; pointer-events: none; }
.plan::after { border-top-color: var(--acento); clip-path: inset(0 calc(100% - 56px) 0 0); }
.plan h3 { font-size: 22px; color: #fff; }
.plan-desc { margin-top: 6px; min-height: 4.8em; font-size: 14.5px; line-height: 1.6; color: var(--panel-tenue); }
.plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 20px; }
.plan-amount { font-family: var(--display); font-size: 48px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; }
.plan-amount--texto { font-size: 40px; line-height: 48px; }
.plan-from { align-self: flex-end; margin-bottom: 4px; font-size: 14px; color: var(--panel-tenue); }
.plan-price .plan-from + .plan-amount { margin-left: -4px; }
/* La franja que cruza a la otra pestaña: discontinua y sin filo, porque no es
   un plan de la nube sino la puerta a los de casa. */
.plan-puente { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 20px 28px; border: 1px dashed rgba(255, 255, 255, 0.2); border-radius: 14px; background: var(--panel); font-size: 14.5px; line-height: 1.55; color: var(--panel-tenue); }
.plan-puente b { font-weight: 600; color: #fff; }
.plan-puente .btn-plan { flex: none; width: auto; margin-top: 0; }
.plan-puente .btn-plan .ic { transition: transform 0.2s var(--ease); }
.plan-puente .btn-plan:hover .ic { transform: translateX(3px); }
.plan-unit { font-size: 14px; color: var(--panel-tenue); }
.plan-note { margin-top: 10px; min-height: 3em; font-size: 13.5px; line-height: 1.5; color: var(--panel-tenue); }
.btn-plan { justify-content: center; width: 100%; margin-top: 18px; border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.btn-plan:hover { border-color: #fff; }
.btn-plan.btn-primary { border-color: transparent; color: var(--sobre-acento); }
.plan-list { list-style: none; display: grid; gap: 11px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--panel-linea); }
.plan-list li { display: flex; gap: 11px; font-size: 14.5px; line-height: 1.5; color: var(--panel-texto); }
.plan-list .ic { margin-top: 3px; font-size: 15px; color: var(--acento); }

.plan--destacado { border-color: rgba(255, 255, 255, 0.5); background: #1D222C; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7); }
.plan--destacado::before { border-top-color: var(--tinta); }
.plan--destacado h3, .plan--destacado .plan-amount { color: var(--tinta-fuerte); }
.plan--destacado .plan-desc, .plan--destacado .plan-unit, .plan--destacado .plan-note { color: var(--texto-suave); }
.plan--destacado .plan-list { border-top-color: var(--borde); }
.plan--destacado .plan-list li { color: var(--texto-medio); }
.plan--destacado .plan-list .ic { color: var(--tinta); }
/* La fila de los créditos de IA, en cada card: un hilo ámbar sobre la lista.
   Sus márgenes negativos dejan el icono y el texto alineados con las demás. */
.plan-list li.plan-ia { margin: 0 -12px; padding: 9px 12px; border: 1px solid rgba(216, 154, 60, 0.42); border-radius: 10px; background: rgba(216, 154, 60, 0.12); color: #fff; font-weight: 500; }
.plan-list li.plan-ia .ic { color: var(--acento); }
.plan-ia b { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--acento-claro); font-variant-numeric: tabular-nums; }

/* La licencia instalada es una sola card, a lo ancho: el texto a un lado y
   «Hablemos» con el botón al otro. */
.plan--unica { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px 48px; }
.plan--unica .plan-desc { min-height: 0; max-width: 62ch; }
.plan-unica-accion { display: flex; flex: none; align-items: center; gap: 28px; }
.plan-unica-accion .plan-price { margin-top: 0; }
.plan-unica-accion .btn-plan { width: auto; min-width: 200px; margin-top: 0; }
.plan-flag { position: absolute; top: -13px; right: 22px; z-index: 1; padding: 4px 12px; border-radius: var(--radio-control); background: var(--acento); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--sobre-acento); }

/* Lo que trae toda licencia instalada, a lo ancho de las tres tarjetas. */
.plan-incluye { grid-column: 1 / -1; display: grid; grid-template-columns: 1.5fr 1fr; gap: 26px 48px; padding: 28px; border: 1px solid var(--panel-linea); border-radius: 14px; background: linear-gradient(rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)), var(--panel); }
.plan-incluye-title { margin-bottom: 16px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--panel-texto); }
.plan-list--cols, .plan-extras .plan-list { margin-top: 0; padding-top: 0; border-top: 0; }
.plan-list--cols { grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.plan-publico { grid-column: 1 / -1; display: flex; gap: 12px; padding-top: 20px; border-top: 1px solid var(--panel-linea); font-size: 14px; line-height: 1.55; color: var(--panel-tenue); }
.plan-publico .ic { margin-top: 3px; font-size: 16px; color: var(--acento); }
.plan-publico b { font-weight: 600; color: #fff; }

/* Lo que gasta cada cosa, debajo de las tarjetas de la nube: como en «Plan y
   uso», el texto a un lado y las tres cosas, con su cifra en grande, al otro. */
.plan-costes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); align-items: center; gap: 18px 40px; margin-top: 20px; padding: 24px 28px; border: 1px solid var(--panel-linea); border-radius: 14px; background: linear-gradient(var(--panel-superficie), var(--panel-superficie)), var(--panel); }
.plan-costes h3 { font-size: 18px; color: #fff; }
.plan-costes-texto p { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--panel-tenue); }
.plan-costes-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 0; margin: 0; }
.plan-costes-cosa { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 0 20px; border-left: 1px solid var(--panel-linea); }
.plan-costes-cosa dt { font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--panel-tenue); }
.plan-costes-cosa dd { margin: 0; font-size: 14px; color: var(--panel-texto); font-variant-numeric: tabular-nums; }
.plan-costes-cosa strong { font-family: var(--display); font-size: 30px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: #fff; }

/* Los bonos de créditos, debajo de las tarjetas de la nube. */
.plans-bonos { display: flex; gap: 12px; max-width: 860px; margin: 26px auto 0; font-size: 14.5px; line-height: 1.55; color: var(--panel-tenue); }
.plans-bonos .ic { flex: none; margin-top: 3px; font-size: 16px; color: var(--acento); }
.plans-bonos b { font-weight: 600; color: #fff; }

.plans-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 30px; font-size: 14px; color: var(--panel-tenue); }
.plans-foot a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--acento-claro); }
.plans-foot a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Contacto y pie
   -------------------------------------------------------------------------- */
.contact-section { background: var(--panel); color: var(--panel-texto); padding: 0; }
.contact { position: relative; z-index: 1; padding: 120px 0 130px; text-align: center; }
.contact .kicker { justify-content: center; color: var(--panel-texto); }
.contact h2 { max-width: none; color: #fff; }
.contact .section-sub { margin: 18px auto 0; color: var(--panel-tenue); }
.contact-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
/* Cae sobre el resplandor ámbar del fondo: un cristal oscuro con borde claro
   para que se lea, en vez de la línea tenue sola. */
.contact-email { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--radio-control); background: rgba(18, 22, 31, 0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6); color: #fff; font-size: 14px; transition: border-color 0.2s, background 0.2s; }
.contact-email .ic { color: var(--acento); }
/* El botón ámbar cae sobre un haz del mismo color: un filo oscuro lo recorta. */
.contact .btn-primary { box-shadow: 0 0 0 1px rgba(18, 22, 31, 0.45), 0 10px 30px -12px rgba(0, 0, 0, 0.6); }
.contact-email:hover { border-color: rgba(255, 255, 255, 0.6); background: rgba(18, 22, 31, 0.92); }
.contact-copied { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); padding: 2px 10px; border-radius: 6px; background: var(--acento); color: var(--sobre-acento); font-size: 12px; font-weight: 700; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.contact-email.is-copied .contact-copied { opacity: 1; }
.footer { background: var(--panel); color: var(--panel-tenue); border-top: 1px solid var(--panel-linea); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; padding: 26px 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 2px; }
.footer-links a { color: var(--panel-tenue); }
.footer-links a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.footer-note { margin-left: auto; font-size: 13px; }
.footer-legal { flex-basis: 100%; }
.footer-legal a { font-size: 13px; }

/* --------------------------------------------------------------------------
   Animaciones
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.reveal.visible { opacity: 1; transform: none; }
.rise { opacity: 0; transform: translateY(16px); animation: rise 0.9s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 110ms + 80ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
/* La cápsula está centrada con translateX(-50%): su animación tiene que
   conservarlo en cada fotograma, o se desliza de lado y salta al terminar. */
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(216, 154, 60, 0.55); } 70% { box-shadow: 0 0 0 9px rgba(216, 154, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(216, 154, 60, 0); } }
/* La vuelta tras cambiar de idioma (landing.js): lo que ya se vio aparece
   puesto, sin entrar otra vez. */
.sin-entrada .reveal, .sin-entrada .rise { opacity: 1; transform: none; animation: none; transition: none; }

/* El cambio de idioma recarga la página (landing.js corta cualquier otra
   navegación) y entra con este barrido, el mismo de la aplicación. La
   nueva entra sobre la vieja de izquierda a derecha, con un borde
   difuminado: el texto cambia poco a poco a su paso y el fondo, que es el
   mismo, no se mueve. La máscara mide la ventana más el borde (un 35 % de
   ella), así que el barrido empieza y acaba justo en los bordes, sin tiempo
   muerto. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) {
  animation: idioma-barrido 420ms cubic-bezier(.4, 0, .2, 1) both;
  mix-blend-mode: normal;
  mask-image: linear-gradient(to right, #000 42.55%, transparent 57.45%);
  mask-size: 235% 100%;
  mask-repeat: no-repeat;
}
@keyframes idioma-barrido {
  from { mask-position: 100% 0; }
  to { mask-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .rise { opacity: 1; transform: none; animation: none; transition: none; }
  .seg-thumb { transition: none; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .features { grid-template-columns: repeat(2, 1fr); }
  .deploy { grid-template-columns: 1fr; }
  .stack-card { position: static; }
  .plan-incluye { grid-template-columns: 1fr; }
  .plan-costes { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .nav-links { display: none; }
  .demo-head, .ways { grid-template-columns: 1fr; }
  .section { padding: 84px 0; }
  .hero { padding: 96px 0 90px; }
  .hero { --bg-webp: url("img/bg-hero-1280.webp"); --bg: image-set(url("img/bg-hero-1280.avif") type("image/avif") 1x, url("img/bg-hero-1920.avif") type("image/avif") 2x, url("img/bg-hero-1280.webp") type("image/webp") 1x, url("img/bg-hero-1920.webp") type("image/webp") 2x); }
  #demo { --bg-webp: url("img/bg-papel-oscuro-1280.webp"); --bg: image-set(url("img/bg-papel-oscuro-1280.avif") type("image/avif") 1x, url("img/bg-papel-oscuro-1920.avif") type("image/avif") 2x, url("img/bg-papel-oscuro-1280.webp") type("image/webp") 1x, url("img/bg-papel-oscuro-1920.webp") type("image/webp") 2x); }
  #salidas { --bg-webp: url("img/bg-salidas-oscuro-1280.webp"); --bg: image-set(url("img/bg-salidas-oscuro-1280.avif") type("image/avif") 1x, url("img/bg-salidas-oscuro-1920.avif") type("image/avif") 2x, url("img/bg-salidas-oscuro-1280.webp") type("image/webp") 1x, url("img/bg-salidas-oscuro-1920.webp") type("image/webp") 2x); }
  #despliegue { --bg-webp: url("img/bg-despliegue-1280.webp"); --bg: image-set(url("img/bg-despliegue-1280.avif") type("image/avif") 1x, url("img/bg-despliegue-1920.avif") type("image/avif") 2x, url("img/bg-despliegue-1280.webp") type("image/webp") 1x, url("img/bg-despliegue-1920.webp") type("image/webp") 2x); }
  .contact-section { --bg-webp: url("img/bg-contacto-1280.webp"); --bg: image-set(url("img/bg-contacto-1280.avif") type("image/avif") 1x, url("img/bg-contacto-1920.avif") type("image/avif") 2x, url("img/bg-contacto-1280.webp") type("image/webp") 1x, url("img/bg-contacto-1920.webp") type("image/webp") 2x); }
  #salidas::after { background: rgba(15, 18, 23, 0.55); }
  #salidas { --bg-opacity: 0.35; }
  .salidas-copy { max-width: none; }
  .plans--nube { grid-template-columns: 1fr; max-width: 520px; }
  .plans--uno > .plan { grid-column: auto; }
  .plan--unica, .plan-unica-accion { flex-direction: column; align-items: stretch; }
  .plan-unica-accion { gap: 0; }
  .plan-unica-accion .plan-price { margin-top: 20px; }
  .plan-unica-accion .btn-plan { width: 100%; margin-top: 18px; }
  .plan-desc, .plan-note { min-height: 0; }
  .plans-bar { flex-direction: column; align-items: flex-start; }
  .plan-puente { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .features { grid-template-columns: 1fr; }
  .container { width: calc(100% - 32px); }
  .ejemplo { padding: 18px; }
  .ejemplo-enlaces { width: 100%; }
  .ejemplo-enlaces .btn-primary { flex: 1 0 100%; justify-content: center; }
  .ejemplo-enlaces .btn-ghost { flex: 1; justify-content: center; }
  .outputs li { grid-template-columns: 1fr; gap: 6px; }
  .footer-note { margin-left: 0; }
  .plan-list--cols { grid-template-columns: 1fr; }
  .plan-costes { padding: 22px; }
  .plan-costes-lista { grid-template-columns: 1fr; }
  .plan-costes-cosa { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--panel-linea); }
  .plan-costes-cosa dd { flex: none; }
  .seg { width: 100%; }
  .seg .seg-btn { flex: 1; padding: 0 10px; }
  .hero-ctas .btn-link { display: none; }
}