/* ═══════════════════════════════════════════════════════════════════════
   PreFrame Web — hoja de la web comercial.

   Depende de `theme.css`, que es una COPIA ÍNTEGRA de `src/styles/theme.css`
   de la app y la fuente única de tokens. Este archivo NO redefine tokens de
   marca: solo añade los que la web necesita y la app no tiene (los lienzos
   claros) y monta el layout.

   theme.css trae `@layer base` / `@layer utilities`; las capas tienen menos
   prioridad que el CSS sin capa, así que todo lo de aquí gana sin `!important`.
   Sus at-rules de Tailwind (`@theme inline`, `@apply`) el navegador las ignora:
   se copia entero a propósito para que sincronizar con la app sea `cp`.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Lienzos claros (solo web) ─────────────────────────────────────
     La app es dark-first y no tiene fondos claros de marca. La web alterna
     negro y blanco, con un blanco cálido para que no haya dos secciones
     blancas seguidas. */
  --paper:       #FFFFFF;
  --paper-soft:  #F4F2EF;   /* blanco cálido */
  --paper-line:  #E4E0DA;   /* borde sobre claro */
  --paper-line-soft: #EFEDE8;

  /* ─── Naranja legible sobre claro ───────────────────────────────────
     `--brand-sunset` (#E8814A) da 2.7:1 sobre blanco: vale para superficies
     y trazos, NO para texto. Estos dos son la versión entintada:
       --sunset-ink   5.16:1 sobre blanco · 4.61:1 sobre cálido → AA en texto
       --sunset-large 4.11:1 sobre blanco → solo texto grande (≥24px) y trazos
     Cálculo hecho con la fórmula WCAG, no a ojo. */
  --sunset-ink:   #B0521F;
  --sunset-large: #C6602C;

  /* Tinta sobre el botón naranja: negro, no blanco (7.3:1 vs 2.7:1). */
  --on-brand: #160B04;

  /* ─── Escala tipográfica de marketing ───────────────────────────────
     La app va a 14px de raíz y su escala está pensada para densidad de
     herramienta. Una landing necesita aire, así que aquí hay una escala
     fluida propia anclada en los mismos tamaños. */
  --web-display: clamp(38px, 5.4vw, 64px);
  --web-h2:      clamp(30px, 4vw, 52px);
  --web-h3:      clamp(20px, 2vw, 25px);
  --web-lede:    clamp(17px, 1.5vw, 20px);
  --web-body:    17px;
  --web-small:   15px;

  --pad: clamp(24px, 5vw, 80px);
  --measure: 1180px;
}

/* ═══════════════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════════════ */

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

html {
  font-size: 16px;              /* la web no hereda los 14px de la app */
  scroll-behavior: smooth;
  color-scheme: dark light;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-ui);
  font-size: var(--web-body);
  line-height: 1.65;
  background-color: var(--surface-0);
  color: var(--text-primary);
  /* `clip` y no `hidden`: `hidden` convierte el body en contenedor de scroll
     y eso anula `position: sticky` dentro (el bloque de capacidades y la
     barra superior). `clip` recorta igual sin crear el contenedor. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Misma trampa que en los titulares: theme.css pinta la selección con texto
   claro porque la app es oscura. Sobre los lienzos claros hay que invertirla. */
::selection { background: var(--brand-sunset-subtle); color: var(--text-primary); }
.canvas-light ::selection,
.canvas-soft ::selection { background: rgba(232, 129, 74, 0.22); color: var(--text-on-light-primary); }

/* Enlaces de prosa (los que no llevan clase: los botones y las navegaciones
   se pintan solos). Sin esto se quedaban en el azul por defecto del navegador,
   que sobre el negro de las secciones oscuras casi no se lee. */
a:not([class]) {
  color: var(--brand-sunset);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:not([class]):hover { color: var(--brand-sunset-hover); }
.canvas-light a:not([class]),
.canvas-soft a:not([class]) { color: var(--sunset-ink); }
.canvas-light a:not([class]):hover,
.canvas-soft a:not([class]):hover { color: var(--sunset-large); }

/* Foco visible y consistente en toda la web (requisito de accesibilidad). */
:focus-visible {
  outline: 2px solid var(--brand-sunset);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
.canvas-light :focus-visible,
.canvas-soft :focus-visible { outline-color: var(--sunset-ink); }

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 200;
  background: var(--brand-sunset);
  color: var(--on-brand);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: var(--web-small);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

/* ═══════════════════════════════════════════════════════════════════════
   LIENZOS Y RITMO VERTICAL
   ═══════════════════════════════════════════════════════════════════════ */

.canvas-dark  { background: var(--surface-0); color: var(--text-primary); }
.canvas-light { background: var(--paper);      color: var(--text-on-light-primary); }
.canvas-soft  { background: var(--paper-soft); color: var(--text-on-light-primary); }

/* ─── Lavado de color de fondo ────────────────────────────────────────
   Manchas grandes, muy diluidas, de la propia paleta. Es lo que hace que un
   fondo blanco no se lea como una hoja en blanco sino como un lienzo. La
   opacidad es deliberadamente baja: se busca el matiz de figma.com sin
   perder el "blanco elegante con mucho aire" que manda en esta web. */
section.canvas-light,
section.canvas-soft,
section.canvas-dark { position: relative; }

section.canvas-light::before,
section.canvas-soft::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 78% at 10% 0%, rgba(232, 129, 74, 0.07), transparent 62%),
    radial-gradient(48% 68% at 92% 18%, rgba(138, 122, 107, 0.08), transparent 62%);
}
/* El hero queda fuera: tiene su propio resplandor, con su geometría, y este
   `inset: 0` se la pisaría. */
section.canvas-dark:not(.hero)::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 70% at 50% 0%, rgba(232, 129, 74, 0.05), transparent 65%);
}

/* ─── Grano ───────────────────────────────────────────────────────────
   Una capa de ruido finísima sobre los fondos oscuros. Es el detalle que
   separa un negro plano de web de un negro de sala: rompe el degradado en
   banda y da textura de película. Generado con feTurbulence en un data URI
   — ni un archivo más que descargar. */
section.canvas-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  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.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { position: relative; z-index: 1; max-width: var(--measure); margin-inline: auto; padding-inline: var(--pad); }

/* Los anclajes (#how, #pricing) no pueden aterrizar debajo de la barra. */
section[id] { scroll-margin-top: 84px; }
.wrap-narrow { max-width: 820px; }

.band       { padding-block: clamp(72px, 10vw, 144px); }
.band-tight { padding-block: clamp(56px, 7vw, 100px); }

/* ═══════════════════════════════════════════════════════════════════════
   ENTRADA AL HACER SCROLL — solo los títulos de sección de la home

   El estado oculto vive bajo `.has-motion`, que pone `motion.js` (y solo
   en la portada). Sin JavaScript, o con "reducir movimiento", la clase no
   se añade y todo se ve desde el primer momento. Desde el 15-sept-2026
   nada más entra así: el resto del contenido está siempre visible.
   ═══════════════════════════════════════════════════════════════════════ */

/* Corto y rápido. El fade-up largo de 600 ms y 20 px es la firma del SaaS de
   plantilla; a 10 px y 400 ms se lee como respuesta, no como animación. */
.has-motion .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.has-motion .reveal.is-in { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════════════════════════════════
   EL CAMPO QUE RESPIRA (/beta/)

   Rescatado del coming soon (soon.css) el 15-sept-2026: un campo de barras
   simétricas que respira; el pulso lo lleva una onda que lo recorre y la
   altura general la marca una curva lenta. Abstracto a propósito — evoca
   ritmo y emoción. Lo anima `beta-field.js` sobre [data-field].
   ═══════════════════════════════════════════════════════════════════════ */

.field {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 0.5vw, 4px);
  height: clamp(120px, 22vh, 220px);
  margin-top: clamp(28px, 5vh, 64px);
  padding-inline: clamp(20px, 5vw, 48px);
  overflow: hidden;
}
.field i {
  display: block;
  flex: 1 1 0;
  min-width: 1px;
  max-width: 7px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--brand-sepia);
  will-change: height, opacity;
}
@media (max-width: 640px) {
  .field { height: 96px; margin-top: var(--space-6); }
}

/* ─── El instrumento de /beta: la promesa entera en una ventana ────────
   Una ventana de la app con el tema dentro: el mp3 en la barra, el campo
   como onda, la curva emocional dibujándose al paso del playhead y la
   pista de secciones de color con sus planos. Todos los motivos son los
   canónicos: paleta --section-*, curva de PREFRAME_TIMELINE, barra
   .stage-bar. Lo mueve `beta-field.js`; sin JavaScript queda la ventana
   quieta con la curva dibujada. */
.beta-stage {
  position: relative;
  max-width: 880px;
  margin: clamp(28px, 5vh, 56px) auto 0;
  padding: var(--space-4) var(--space-5) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  text-align: left;
  overflow: hidden;
}
.beta-stage .stage-bar { margin-bottom: var(--space-2); }
.beta-stage .field {
  height: clamp(100px, 17vh, 160px);
  margin-top: 0;
  padding-inline: 0;
  gap: clamp(2px, 0.3vw, 3px);
}
/* Waveform de mp3: barras finas y densas, no columnas. */
.beta-stage .field i { max-width: 3.5px; }
.beta-wave { position: relative; }
.beta-curve { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.beta-curve path {
  fill: none;
  stroke: var(--brand-sunset);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 6px rgba(232, 129, 74, 0.5));
}
/* Sin movimiento (o sin JS): la curva entera, quieta. */
@media (prefers-reduced-motion: reduce) {
  .beta-curve path { stroke-dashoffset: 0; }
}
.beta-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1.5px;
  background: color-mix(in srgb, var(--brand-sunset) 85%, #fff);
  box-shadow: 0 0 10px rgba(232, 129, 74, 0.8);
  opacity: 0;               /* lo enciende beta-field.js al arrancar */
  will-change: transform;
  pointer-events: none;
}
/* La pista de secciones: cada corte es un cambio de color, y debajo de
   cada sección van sus planos. Rótulos en inglés en los dos idiomas —
   regla de mockups (t.js, decisión 14-ago). */
.beta-sections {
  display: flex;
  gap: 3px;
  margin-top: var(--space-3);
}
.beta-sections > div {
  border-top: 2.5px solid var(--sec);
  padding-top: 7px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.beta-sections b {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
}
.beta-sections span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}
@media (max-width: 640px) {
  .beta-stage .field { height: 84px; }
  .beta-sections span { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   EL RAÍL — la página como pista de tiempo
   ═══════════════════════════════════════════════════════════════════════ */

/* El raíl va anclado a la derecha y tiene ANCHO FIJO. Es importante: si el
   ancho dependiera de la etiqueta, al activarse una sección la caja crecería
   y los números se desplazarían de lado. Por eso la etiqueta sale del flujo
   —posicionada a la izquierda del número— y la columna de números no se
   mueve nunca. */
.rail {
  position: fixed;
  right: clamp(16px, 2vw, 34px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: grid;
  gap: 2px;
  width: 3.4em;
  padding-right: var(--space-4);
  border-right: 1px solid var(--border-default);
  font-family: var(--font-mono);
  font-size: 10px;
}
.rail-fill {
  position: absolute;
  right: -1px;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--brand-sunset);
  transform-origin: top;
  transform: scaleY(0);
}
.rail-mark {
  position: relative;
  display: flex;
  justify-content: flex-end;
  padding: 5px 0;
  text-decoration: none;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  opacity: 0.5;
  transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.rail-mark:hover { opacity: 1; }
.rail-mark.is-active { opacity: 1; color: var(--brand-sunset); }
.rail-n { font-variant-numeric: tabular-nums; }

/* Fuera del flujo: aparece a la izquierda del número sin empujar nada. */
.rail-label {
  position: absolute;
  right: calc(100% + var(--space-3));
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.rail:hover .rail-label,
.rail-mark.is-active .rail-label { opacity: 1; }

/* El raíl va fijo sobre secciones que alternan negro y blanco, así que se
   entinta según sobre cuál esté. Lo marca `motion.js` con `.on-light`. */
.rail.on-light { border-left-color: var(--paper-line); }
.rail.on-light .rail-mark { color: var(--text-on-light-secondary); }
.rail.on-light .rail-mark.is-active { color: var(--sunset-ink); }
.rail.on-light .rail-fill { background: var(--sunset-ink); }

/* ═══════════════════════════════════════════════════════════════════════
   TIPOGRAFÍA
   ═══════════════════════════════════════════════════════════════════════ */

/* `color: inherit` no es decorativo: theme.css fija `color: var(--text-primary)`
   (blanco roto) en h1-h6 dentro de su `@layer base`, porque la app es toda
   oscura. Sin esto, los titulares salen casi blancos también sobre los lienzos
   claros — es decir, invisibles. Heredando, cada título toma el color de su
   lienzo (`.canvas-dark` / `.canvas-light` / `.canvas-soft`). */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.08;
  color: inherit;
}
h1 { font-size: var(--web-display); }
h2 { font-size: var(--web-h2); }
h3 { font-size: var(--web-h3); line-height: 1.22; letter-spacing: -0.01em; }
h4 { font-size: var(--text-md); line-height: 1.3; }

p { line-height: 1.65; }
p + p { margin-top: var(--space-4); }

.lede { font-size: var(--web-lede); line-height: 1.55; max-width: 60ch; }
.small { font-size: var(--web-small); }

/* Texto secundario por lienzo. Sobre oscuro se usa `--text-tertiary`
   (10.9:1) y no `--text-disabled` (4.9:1): el brief avisa de que el
   secundario de la paleta oscura se queda corto. */
.mute-d { color: var(--text-tertiary); }
.mute-l { color: var(--text-on-light-secondary); }

/* Badge, no línea de texto: es de lo que más "producto moderno" aporta y de
   lo más barato de la referencia de Figma. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: var(--space-5);
  line-height: 1;
}
.eyebrow::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex: none;
}
.eyebrow-d {
  color: var(--brand-sunset);
  background: var(--brand-sunset-muted);
  border-color: rgba(232, 129, 74, 0.22);
}
.eyebrow-l {
  color: var(--sunset-ink);
  background: rgba(176, 82, 31, 0.06);
  border-color: rgba(176, 82, 31, 0.16);
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════
   BOTONES
   ═══════════════════════════════════════════════════════════════════════ */

.cta-row {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--space-8);
}
.cta-row-center { justify-content: center; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  padding: 15px var(--space-7);
  border: 1px solid transparent;
  /* Píldora: lo usan las dos referencias, Figma y Apple. */
  border-radius: var(--radius-full);
  text-decoration: none;
  cursor: pointer;
  background: none;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }

.btn-primary { background: var(--brand-sunset); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-sunset-hover); box-shadow: 0 10px 30px -12px rgba(232, 129, 74, 0.75); }
.btn-primary:active { background: var(--brand-sunset-pressed); transform: none; }

.btn-ghost-d { border-color: var(--border-strong); color: var(--text-primary); }
.btn-ghost-d:hover { border-color: var(--brand-sunset); color: var(--brand-sunset); }

.btn-ghost-l { border-color: var(--paper-line); color: var(--text-on-light-primary); }
.btn-ghost-l:hover { border-color: var(--sunset-ink); color: var(--sunset-ink); }

/* ─── Descarga deshabilitada ────────────────────────────────────────────
   El .dmg firmado no existe todavía (Fase 8 de la app). El botón está
   presente pero no lleva a ninguna parte y lo dice. Se usa `<button>` con
   `disabled`, no un `<a>` sin href: así el teclado y el lector de pantalla
   coinciden con lo que se ve. */
.btn[disabled],
.btn[aria-disabled='true'] {
  cursor: not-allowed;
  transform: none;
}
.req { margin-top: var(--space-4); color: var(--text-tertiary); }
.req-l { color: var(--text-on-light-secondary); }

/* ═══════════════════════════════════════════════════════════════════════
   NAVEGACIÓN
   ═══════════════════════════════════════════════════════════════════════ */

/* La barra va FIJA, no pegajosa: en la portada no existe hasta que se deja
   atrás el hero, y al ir fija no reserva sitio arriba. `motion.js` le pone
   `.is-hidden` mientras el hero ocupa la pantalla. */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: rgba(8, 8, 8, 0.32);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
}

/* Retirada mientras se está en el hero. Se sube en vez de ocultarse para que
   al volver baje deslizando, y sigue siendo alcanzable con el tabulador: si
   algo dentro recibe foco, la barra aparece. */
.site-nav.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.site-nav.is-hidden:focus-within {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
/* Al separarse de arriba se condensa: más opaca, con línea y algo más baja. */
.site-nav.is-scrolled {
  background: rgba(8, 8, 8, 0.62);
  border-bottom-color: var(--border-default);
}
.nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  height: 68px;
  transition: height var(--dur-base) var(--ease-out);
}
.site-nav.is-scrolled .nav-in { height: 58px; }
/* El CTA del header, con el texto en negro: sobre el naranja lee mejor que el crema. */
.site-nav .btn-primary { color: #080808; }
.site-nav .btn-primary:hover { color: #080808; }
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-decoration: none;
}
/* El tile de la marca ya trae su propio fondo, su squircle y su brillo: aquí
   solo se le da tamaño. La sombra va con `drop-shadow` y no con `box-shadow`
   porque el PNG/SVG tiene las esquinas transparentes y una caja dibujaría la
   sombra cuadrada por fuera del squircle. */
.logo-mark {
  width: 28px;
  height: 28px;
  display: block;
  flex: none;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.4));
}

.nav-links { display: flex; align-items: center; gap: var(--space-7); }
.nav-links a {
  color: var(--text-tertiary);
  text-decoration: none;
  font-size: var(--web-small);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-links a:hover { color: var(--text-primary); }
.nav-links a[aria-current='page'] { color: var(--text-primary); }
.nav-links .btn { padding: 10px var(--space-5); font-size: var(--web-small); }

/* ─── Cambio de idioma ─────────────────────────────────────────────────
   Un enlace y nada más: sin JavaScript, sin localStorage y sin cookies. La
   política de privacidad publicada promete cero almacenamiento y el idioma
   ya vive en la URL, así que no hay nada que recordar.

   Discreto a propósito: hereda el tamaño de su contexto (nav o footer) y el
   mismo gris de los enlaces de al lado; solo añade el recuadro que lo hace
   legible como control y no como una sección más. */
.nav-links .lang-switch,
.foot-links .lang-switch {
  color: var(--text-tertiary);
  text-decoration: none;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 5px var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.nav-links .lang-switch:hover,
.foot-links .lang-switch:hover {
  color: var(--text-primary);
  border-color: var(--border-default);
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO

   Todo lo vertical va en `vh` para que texto + moodboard + timeline +
   secciones quepan en un portátil de 13" y el borde inferior del stage
   asome justo en el fold.
   ═══════════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(32px, 4.5vh, 60px);
  padding-bottom: 0;
}
.hero::before {
  content: '';
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 130vw);
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(232, 129, 74, 0.15), transparent 66%);
  filter: blur(30px);
  pointer-events: none;
}
.hero-in {
  position: relative;
  text-align: center;
  /* Más ancho que el resto de la página: el Mac es el protagonista y a 1180
     se leía pequeño en un portátil. Los textos no se estiran porque llevan
     su medida en `ch`. */
  max-width: min(1340px, 94vw);
}

/* ─── Marca a tamaño de portada ───────────────────────────────────────
   La barra de navegación no está aquí, así que el nombre del producto es lo
   primero y ocupa lo que tiene que ocupar. Debajo, una sola frase. */
/* El hero no lleva icono: la marca la sostiene el nombre solo, así que va a
   tamaño de cartel. El `h1` ya hereda Satoshi 700, que es la más pesada que
   viaja empaquetada — el peso extra sale del cuerpo y del tracking, no de un
   font-weight que no existe. */
.hero-title {
  font-size: clamp(62px, 10.2vw, 128px);
  line-height: 0.92;
  letter-spacing: -0.05em;
  margin-bottom: var(--space-4);
}
.hero-claim {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: clamp(19px, 2.3vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin-inline: auto;
  color: var(--text-secondary);
}
.hero-who {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-sunset);
}

.hero .cta-row { justify-content: center; margin-top: var(--space-7); }

/* ─── La barra de ventana: tres puntos y un nombre de archivo ─────────── */
.stage-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.dot { width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--surface-5); flex: none; }
.stage-file {
  margin-left: var(--space-3);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mc {
  position: absolute;
  padding: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  box-shadow: 0 20px 44px -24px rgba(0, 0, 0, 0.95);
}
.mc-cap {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
.refimg {
  height: clamp(40px, 6.5vh, 60px);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xs);
}
/* Placeholders de referencia hasta que existan los frames del proyecto demo.
   Degradados, no fotos inventadas. */
.r1 { background: linear-gradient(150deg, #3A2418, #1A1416 62%, #101012); }
.r2 { background: linear-gradient(150deg, #16262A, #131A22 60%, #101012); }

/* La franja del día usa los tokens solares de la app, no un degradado nuevo. */
.sunbar {
  position: relative;
  height: 12px;
  margin: var(--space-2) 0 7px;
  border-radius: var(--radius-xs);
  background: linear-gradient(
    90deg,
    var(--solar-noche),
    var(--solar-blue) 22%,
    var(--solar-dia) 48%,
    var(--solar-golden) 72%,
    var(--solar-blue) 88%,
    var(--solar-noche)
  );
}
.sunwin {
  position: absolute;
  inset: -3px auto -3px 56%;
  width: 22%;
  border: 1.5px solid var(--text-primary);
  border-radius: var(--radius-xs);
}

/* Nota manuscrita: Fraunces cursiva. Única excepción tipográfica de la web
   — aquí la fuente representa contenido tecleado por el usuario en el
   Mood Bar, no es voz de marca. */
.mc-note {
  font-family: var(--font-focus-display);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.35;
  padding: var(--space-3);
  color: var(--text-primary);
  background: var(--brand-sunset-subtle);
  border-color: rgba(232, 129, 74, 0.3);
}

/* ─── Los sustratos de las ventanas gemelas ───────────────────────────── */
.curve-path { fill: none; stroke: url(#curveStroke); stroke-width: 2; stroke-linecap: round; }
.curve-fill { fill: url(#curveFade); stroke: none; }

/* Los degradados del SVG llevan los hex en el atributo como reserva; estas
   reglas los reescriben con los tokens de la app, que es la fuente buena.
   El CSS gana a los atributos de presentación, así que basta con esto. */
#curveStroke stop:nth-of-type(1) { stop-color: var(--curve-climax); }
#curveStroke stop:nth-of-type(2) { stop-color: var(--curve-warm); }
#curveStroke stop:nth-of-type(3) { stop-color: var(--curve-mid); }
#curveStroke stop:nth-of-type(4) { stop-color: var(--curve-cool); }
#curveFade stop { stop-color: var(--brand-sunset); }

/* ═══════════════════════════════════════════════════════════════════════
   DOS CAMINOS — las ventanas gemelas

   El argumento de la sección es una rima visual: dos ventanas con la misma
   tira de secciones abajo y los cortes en los mismos puntos, pero una corta
   sobre la waveform del .mp3 y la otra sobre la curva emocional dibujada a
   mano. Estático a propósito: aquí no se vende interactividad, se vende que
   se puede planificar con canción o sin ella.
   ═══════════════════════════════════════════════════════════════════════ */

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7) var(--space-6);
  margin-top: var(--space-8);
  text-align: left;
}
@media (max-width: 940px) {
  .duo { grid-template-columns: 1fr; }
}

/* La ventana hereda el lenguaje del resto de mockups: oscura, flotando
   sobre el blanco como una ventana de app. `relative` ancla el puntero
   coreografiado de la ventana de la curva. */
.duo-window {
  position: relative;
  padding: var(--space-4) var(--space-5) var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  box-shadow: var(--elev-3);
}

/* El puntero coreografiado (curve-demo.js): mismo lenguaje que el cursor
   de la card solar. Enseña el gesto; no promete interactividad — por eso
   no lleva etiqueta. */
.demo-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.demo-cursor.is-on { opacity: 1; }
.demo-cursor svg {
  width: 22px;
  height: 22px;
  fill: var(--brand-sunset);
  stroke: #160B04;   /* silueta sobre fondo oscuro, como el cursor solar */
  stroke-width: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
  transition: transform var(--dur-instant) var(--ease-out);
}
.demo-cursor.is-down svg { transform: scale(0.82); }
@media (max-width: 768px) {
  .demo-cursor { display: none; }   /* en táctil no hay cursor que imitar */
}
.duo-visual { margin-top: var(--space-2); }
.duo-visual svg { width: 100%; height: auto; display: block; overflow: visible; }

/* La waveform: barras verticales de un solo trazo. `preserveAspectRatio:
   none` estira el viewBox, así que el grosor se fija aquí y no escala. */
.duo-wave {
  fill: none;
  stroke: var(--text-tertiary);
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0.75;
  vector-effect: non-scaling-stroke;
}

/* Los cortes de sección: el mismo naranja en ambas ventanas — es la rima. */
.duo-cut {
  fill: none;
  stroke: var(--brand-sunset);
  stroke-width: 1.5;
  stroke-dasharray: 3 6;
  opacity: 0.65;
  vector-effect: non-scaling-stroke;
}

/* Los keyframes de la curva: el mismo punto que en la app — fondo oscuro,
   aro sunset. */
.duo-kf {
  fill: var(--surface-0);
  stroke: var(--brand-sunset);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.duo-card h3 {
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}
.duo-card > p {
  margin-top: var(--space-2);
  max-width: 46ch;
  font-size: var(--text-base);
  line-height: 1.6;
}

.duo-close { margin-top: var(--space-8); }

/* ─── Secciones narrativas ────────────────────────────────────────────── */
.sections { display: flex; gap: 2px; margin-top: var(--space-3); }
.sec { flex: 1; padding-top: 7px; border-top: 2px solid; }
.sec span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ═══════════════════════════════════════════════════════════════════════
   SUPERFICIES DE TARJETA

   Radio grande y reacción al puntero. Es lo que más se nota de la referencia
   de Figma, y a la vez lo más barato de mantener: una sola regla para todas
   las familias de tarjeta de la web.
   ═══════════════════════════════════════════════════════════════════════ */

.card,
.price,
.cf-step,
.faq details,
.frame,

.card,
.cf-step,
.price {
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
.card:hover,
.cf-step:hover {
  transform: translateY(-3px);
  border-color: #D8D3CA;
  box-shadow: 0 20px 44px -28px rgba(26, 25, 23, 0.35);
}

/* La destacada de precio ya lleva su anillo; al pasar por encima se refuerza
   en vez de moverse, para que no compita con la tarjeta gratuita. */
.price.is-featured:hover { box-shadow: 0 0 0 1px var(--brand-sunset), 0 22px 48px -30px rgba(232, 129, 74, 0.55); }

/* ═══════════════════════════════════════════════════════════════════════
   STATEMENT
   ═══════════════════════════════════════════════════════════════════════ */

.statement { text-align: center; }
.statement h2 { max-width: 19ch; margin-inline: auto; }
.statement p { margin: var(--space-7) auto 0; max-width: 56ch; font-size: var(--web-lede); }

/* ═══════════════════════════════════════════════════════════════════════
   CÓMO FUNCIONA
   ═══════════════════════════════════════════════════════════════════════ */

.steps { display: grid; gap: clamp(44px, 6vw, 88px); margin-top: clamp(44px, 5.5vw, 80px); }
.step {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.step:nth-child(even) .step-visual { order: -1; }
.step-tc {
  display: block;
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--sunset-ink);
}
.step h3 { margin-bottom: var(--space-3); }
.step p { max-width: 46ch; }

/* Huecos de captura. Se quedan hasta que existan las capturas reales del
   proyecto demo: mejor un hueco honesto que una imagen inventada. */
.frame {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  background: var(--paper-soft);
}
.frame-dark { background: var(--surface-1); border-color: var(--border-default); }
.slot {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 var(--space-4);
  color: var(--text-on-light-secondary);
  line-height: 1.6;
}
.frame-dark .slot { color: var(--text-tertiary); }

/* ═══════════════════════════════════════════════════════════════════════
   PESTAÑAS DE CAPACIDADES

   Estructura de la página de Final Cut Pro: la lista manda a la izquierda,
   el objeto grande a la derecha. Se lee una idea a la vez en vez de cuatro
   tarjetas que no miras.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 02 · Hora dorada ────────────────────────────────────────────────── */
.mini-sun { display: grid; gap: var(--space-3); }
.sun-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--paper-line-soft);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.sun-key { color: var(--text-on-light-tertiary); letter-spacing: 0.08em; text-transform: uppercase; }
.sun-val { color: var(--text-on-light-primary); }
.sun-val.is-brand { color: var(--sunset-ink); }
.mini-sun .sunbar { height: 30px; border-radius: var(--radius-sm); margin: var(--space-3) 0; }
.mini-sun .sunwin { inset: -4px auto -4px 56%; width: 22%; border-color: var(--text-on-light-primary); }

/* ─── 04 · Offline ────────────────────────────────────────────────────── */
.mini-offline { display: grid; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); }
.off-row { display: flex; align-items: center; gap: var(--space-3); }
.off-dot { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--brand-sepia); flex: none; }
.off-dot.is-local { background: var(--success); }
.off-where { margin-left: auto; color: var(--text-on-light-tertiary); }
.off-rule { height: 1px; background: var(--paper-line); margin: var(--space-3) 0; }
.off-row.is-sync { color: var(--text-on-light-secondary); }

/* ═══════════════════════════════════════════════════════════════════════
   GRID DE CAPACIDADES
   ═══════════════════════════════════════════════════════════════════════ */

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-top: clamp(36px, 4.5vw, 56px);
}
.card {
  padding: var(--space-6) var(--space-6) var(--space-7);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  background: var(--paper);
}
.card .ic {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: var(--space-4);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
  background: var(--paper-soft);
  color: var(--sunset-ink);
}
.card .ic svg { width: 17px; height: 17px; }
.card h3 { font-size: var(--text-md); margin-bottom: var(--space-2); }
.card p { font-size: var(--web-small); color: var(--text-on-light-secondary); }

/* ═══════════════════════════════════════════════════════════════════════
   PDF DE RODAJE
   ═══════════════════════════════════════════════════════════════════════ */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 768px) {
  .split { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════════════════
   FOUNDER
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   PRECIO
   ═══════════════════════════════════════════════════════════════════════ */

.prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-top: clamp(36px, 4.5vw, 56px);
  max-width: 880px;
}
.price {
  padding: var(--space-7) var(--space-7) var(--space-8);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  background: var(--paper);
}
.price.is-featured { border-color: var(--brand-sunset); box-shadow: 0 0 0 1px var(--brand-sunset); }
.tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-light-secondary);
}
.price.is-featured .tag { color: var(--sunset-ink); }
.amount {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-3) 0 var(--space-1);
  line-height: 1;
}
.price ul { list-style: none; display: grid; gap: 11px; margin-top: var(--space-6); }
.price li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--web-small);
  color: var(--text-on-light-secondary);
}
.price li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 1.5px;
  background: var(--brand-sunset);
}
.notice {
  margin-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-on-light-secondary);
  max-width: 72ch;
}

/* ═══════════════════════════════════════════════════════════════════════
   CIERRE Y FOOTER
   ═══════════════════════════════════════════════════════════════════════ */

.closer { text-align: center; }
.closer h2 { max-width: 17ch; margin-inline: auto; }

.rule { display: flex; gap: 2px; height: 20px; align-items: center; opacity: 0.25; }
.rule i { flex: 1; border-radius: 1px; background: var(--surface-5); }

.site-footer { border-top: 1px solid var(--border-default); padding-block: var(--space-9); }
.foot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-7);
  flex-wrap: wrap;
  align-items: flex-start;
}
.foot-links { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.foot-links a {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.foot-links a:hover { color: var(--text-primary); }
.foot .meta { color: var(--text-tertiary); }

/* ═══════════════════════════════════════════════════════════════════════
   PÁGINAS INTERIORES
   ═══════════════════════════════════════════════════════════════════════ */

/* La barra es fija y no reserva sitio, así que las páginas que empiezan por
   aquí (todas menos la portada, que tiene hero) suman su altura. */
.page-head {
  padding-block: calc(clamp(56px, 8vw, 104px) + 68px) clamp(28px, 4vw, 48px);
}
.page-head h1 { max-width: 20ch; }
.page-head .lede { margin-top: var(--space-5); color: var(--text-tertiary); }

/* ─── FAQ / acordeón nativo ───────────────────────────────────────────── */
.faq { display: grid; gap: var(--space-3); margin-top: var(--space-7); max-width: 760px; }
.faq details {
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  background: var(--paper);
  overflow: hidden;
}
.faq summary {
  padding: var(--space-5) var(--space-6);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-family: var(--font-mono);
  color: var(--sunset-ink);
  flex: none;
}
.faq details[open] summary::after { content: '−'; }
.faq .faq-body { padding: 0 var(--space-6) var(--space-5); }
.faq .faq-body p { font-size: var(--web-small); color: var(--text-on-light-secondary); }
.faq .faq-body p + p { margin-top: var(--space-3); }

/* ─── Diagrama del crédito ────────────────────────────────────────────── */
.credit-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-7);
  max-width: 900px;
}
.cf-step {
  position: relative;
  padding: var(--space-6);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  background: var(--paper);
}
.cf-step .cf-n {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sunset-ink);
}
.cf-step h3 { font-size: var(--text-md); margin: var(--space-3) 0 var(--space-2); }
.cf-step p { font-size: var(--web-small); color: var(--text-on-light-secondary); }
.cf-cost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: 5px var(--space-3);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.cf-cost.is-paid { background: rgba(176, 82, 31, 0.1); color: var(--sunset-ink); }
.cf-cost.is-free { background: rgba(107, 184, 127, 0.14); color: #2F6B41; }

/* ─── Lista de notas de versión ───────────────────────────────────────── */
.release { padding-block: var(--space-7); border-bottom: 1px solid var(--border-default); }
.release:last-child { border-bottom: 0; }
.release-head { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.release-v {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--brand-sunset);
  font-variant-numeric: tabular-nums;
}
.release-date { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); }
.release ul { margin-top: var(--space-4); padding-left: var(--space-5); }
.release li { color: var(--text-tertiary); margin-bottom: var(--space-2); }

/* ─── Aviso de estado (pendiente / placeholder) ───────────────────────── */
.placeholder {
  margin: var(--space-4) 0;
  padding: var(--space-5) var(--space-5);
  border: 1px dashed rgba(232, 129, 74, 0.4);
  border-radius: var(--radius-md);
  background: var(--brand-sunset-muted);
  font-size: var(--web-small);
  line-height: 1.6;
  color: var(--brand-amber);
}
.canvas-light .placeholder,
.canvas-soft .placeholder {
  border-color: rgba(176, 82, 31, 0.4);
  background: rgba(176, 82, 31, 0.06);
  color: var(--sunset-ink);
}

/* ═══════════════════════════════════════════════════════════════════════
   PÁGINAS HEREDADAS — /buy/* y /legal/* (Fase 6)
   Estilos portados del antiguo `preframe.css`, que este archivo sustituye.
   ═══════════════════════════════════════════════════════════════════════ */

.card-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 480px;
  margin-inline: auto;
  padding: var(--space-7) var(--space-6);
}
.card-page .logo { margin-bottom: var(--space-8); }
.card-page h1 { font-size: 30px; margin-bottom: var(--space-3); }
.card-page .lead { font-size: var(--web-small); color: var(--text-tertiary); }
.card-page .foot { margin-top: var(--space-8); font-size: var(--text-xs); color: var(--text-tertiary); }
.card-page .foot a { color: var(--text-tertiary); }

.status {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-5);
  border-radius: var(--radius-xl);
}
.status.success { background: var(--success-subtle); border: 1px solid rgba(107, 184, 127, 0.3); }
.status.neutral { background: rgba(197, 191, 178, 0.1); border: 1px solid var(--border-strong); }

.doc-page { width: 100%; max-width: 780px; margin-inline: auto; padding: var(--space-9) var(--space-6) var(--space-10); }
.doc-page .logo { margin-bottom: var(--space-9); }
.doc-page h1 { font-size: clamp(30px, 4vw, 40px); margin-bottom: var(--space-2); }
.doc-meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); margin-bottom: var(--space-8); }
.doc-page h2 { font-size: var(--text-lg); margin: var(--space-8) 0 var(--space-3); }
.doc-page h3 { font-size: var(--text-md); margin: var(--space-6) 0 var(--space-2); }
.doc-page p, .doc-page li { font-size: var(--web-small); line-height: 1.7; color: var(--text-secondary); margin-bottom: var(--space-3); }
.doc-page ul, .doc-page ol { padding-left: var(--space-6); margin-bottom: var(--space-3); }
.doc-page a { color: var(--brand-sunset); }
.doc-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-10);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-default);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.doc-foot a { color: var(--text-tertiary); }

/* ═══════════════════════════════════════════════════════════════════════
   GUÍAS — índice y artículo (roadmap 17)
   ═══════════════════════════════════════════════════════════════════════ */

/* La cabecera de una guía: el eyebrow es un enlace de vuelta al índice. */
.guide-head h1 { max-width: 22ch; }
.guide-head a.eyebrow { text-decoration: none; }
.guide-head a.eyebrow:hover { color: var(--text-primary); }
.guide-meta { margin-top: var(--space-6); color: var(--text-tertiary); }

/* ─── La prosa ─────────────────────────────────────────────────────────
   Sale de Markdown, así que se estila por etiqueta y no por clase. Medida
   corta (≈ 68 caracteres) y aire entre bloques: esto se LEE, no se escanea. */
.prose { max-width: 720px; }
.prose > * + * { margin-top: var(--space-5); }
.prose p,
.prose li { font-size: var(--text-md); line-height: 1.7; color: var(--text-on-light-secondary); }
.prose strong { color: var(--text-on-light-primary); }
.prose h2 { font-size: clamp(26px, 3.2vw, 34px); margin-top: var(--space-10); }
.prose h3 { font-size: var(--text-lg); margin-top: var(--space-8); }
.prose h2 + *,
.prose h3 + * { margin-top: var(--space-4); }
.prose ul,
.prose ol { padding-left: var(--space-6); }
.prose li + li { margin-top: var(--space-2); }
.prose ol > li::marker { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--sunset-ink); }
.prose hr { border: 0; border-top: 1px solid var(--paper-line); margin-block: var(--space-9); }

.prose blockquote {
  margin-inline: 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  border-left: 3px solid var(--sunset-ink);
}
.prose blockquote p { font-size: var(--text-lg); line-height: 1.5; color: var(--text-on-light-primary); }

.prose code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: var(--paper-soft);
  border: 1px solid var(--paper-line);
  color: var(--text-on-light-primary);
}
.prose pre {
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--surface-0);
  overflow-x: auto;
}
.prose pre code { padding: 0; border: 0; background: none; color: var(--text-primary); font-size: var(--text-sm); line-height: 1.6; }

/* Las capturas son la app de verdad: marco fino y sombra, para que una
   captura oscura no se funda con el párrafo ni una clara con el papel. */
.prose figure { margin: var(--space-8) 0; }
.prose figure img,
.prose > p > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--paper-line);
  box-shadow: 0 18px 40px -24px rgba(26, 26, 26, 0.35);
}
.prose figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--text-on-light-tertiary);
}

.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.prose th,
.prose td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--paper-line); color: var(--text-on-light-secondary); }
.prose th { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-on-light-tertiary); }
.prose .table-scroll { overflow-x: auto; }

/* El recuadro de «lo esencial» o de aviso dentro de una guía. */
.prose .callout {
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  background: var(--paper-soft);
  border: 1px solid var(--paper-line);
}
.prose .callout > * + * { margin-top: var(--space-3); }
.prose .callout p,
.prose .callout li { font-size: var(--text-sm); }

/* ─── El cierre y «más guías» ───────────────────────────────────────── */
.guide-cta h2 { max-width: 18ch; }
.guide-cta .lede { margin-top: var(--space-4); color: var(--text-tertiary); }
.guide-cta .cta-row { margin-top: var(--space-7); }

.guide-more { list-style: none; padding: 0; margin-top: var(--space-5); display: grid; gap: var(--space-3); }
.guide-more a { font-size: var(--text-md); }

/* ─── El índice ─────────────────────────────────────────────────────── */
.guide-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-6);
}
.guide-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.guide-card:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -24px rgba(26, 26, 26, 0.35); }
.guide-card img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-bottom: 1px solid var(--paper-line); }
.guide-card-body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); flex: 1; }
.guide-card-meta { color: var(--text-on-light-tertiary); }
.guide-card-title { font-family: var(--font-display, inherit); font-size: var(--text-lg); line-height: 1.25; color: var(--text-on-light-primary); }
.guide-card-desc { font-size: var(--text-sm); line-height: 1.6; color: var(--text-on-light-secondary); }
.guide-card-go { margin-top: auto; padding-top: var(--space-2); font-size: var(--text-sm); color: var(--sunset-ink); }

@media (prefers-reduced-motion: reduce) {
  .guide-card { transition: none; }
  .guide-card:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — escritorio · tablet · móvil
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Tablet (≤ 1024px) ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  /* Las pestañas pasan a una columna: la lista arriba, el objeto debajo. Y se
     desactiva el recorrido pegado — en una pantalla de mano, quedarse pegado
     es un secuestro, no una gracia. */
  .step { gap: clamp(24px, 4vw, 48px); }
  .credit-flow { grid-template-columns: 1fr; }
  /* El moodboard pierde densidad, no objetos: la nota se va y el resto se
     reparte el ancho. */
}

/* ─── Móvil (≤ 768px) ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .step,
  .split,
  .founder,

  .step:nth-child(even) .step-visual { order: 0; }
  .step-visual { margin-top: var(--space-5); }

  .nav-links { gap: var(--space-4); }
  /* En móvil el nav se queda en logo + CTA. El cambio de idioma es la
     excepción: si desaparece, en móvil no hay forma de cambiar de idioma
     desde arriba. */
  .nav-links a:not(.btn):not(.lang-switch) { display: none; }

  .hero .cta-row { flex-direction: column; align-items: stretch; }
  .hero .cta-row .btn { width: 100%; }

  .stage-bar { flex-wrap: wrap; }
  .stage-file { margin-left: var(--space-2); }

  .sec span { font-size: 8.5px; letter-spacing: 0.06em; }
  .paper-sheet { max-width: 420px; margin-inline: auto; }
  .foot { flex-direction: column; gap: var(--space-6); }
}

@media (max-width: 480px) {
  .sections { gap: 1px; }
  .sec span { display: none; }
  .amount { font-size: 40px; }
}

/* ─── Utilidades de conmutación por dispositivo ───────────────────────── */
.only-mobile { display: none; }
@media (max-width: 768px) {
  .only-mobile { display: inline-flex; }
  .not-mobile { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOVIMIENTO REDUCIDO
   El ciclo del hero se cancela desde JS; esto apaga además cualquier
   transición residual.
   ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .btn:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   IMPRESIÓN — que la hoja de precio o la FAQ se puedan imprimir sin desastre
   ═══════════════════════════════════════════════════════════════════════ */

@media print {
  .site-nav, .duo, .site-footer, .cta-row { display: none; }
  body { background: #fff; color: #000; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PASADA DE MARKETING (08-2026) — hero, statement, precio, cierre
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Hero: la palabra clave se entinta, el título respira luz ────────── */
.hero-claim em {
  font-style: normal;
  background: linear-gradient(100deg, var(--brand-sunset), var(--brand-amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Fallback: si background-clip:text no existe, el em queda naranja plano. */
@supports not (background-clip: text) {
  .hero-claim em { background: none; color: var(--brand-sunset); }
}
.hero-title {
  background: linear-gradient(180deg, #FFFFFF 30%, var(--text-tertiary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@supports not (background-clip: text) {
  .hero-title { background: none; color: var(--text-primary); }
}

/* ─── Flecha del CTA primario: aparece y empuja al pasar ──────────────── */
.btn[data-arrow]::after {
  content: '→';
  display: inline-block;
  margin-left: 2px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn[data-arrow]:hover::after { transform: translateX(4px); }

/* ─── Statement: un pensamiento a tamaño de sala ──────────────────────
   `.statement .statement-kicker` y no `.statement-kicker` a secas: la regla
   heredada `.statement p` (margen grande + tamaño de lede) ganaría por
   especificidad y aplastaría el kicker. */
.statement .statement-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sunset-ink);
  margin: 0 auto var(--space-6);
  max-width: none;
}
.statement .statement-big {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.28;
  letter-spacing: -0.02em;
  max-width: 30ch;
  margin-inline: auto;
  color: var(--text-on-light-secondary);
  text-wrap: balance;
}
.statement-big em {
  font-style: normal;
  font-weight: var(--font-weight-bold);
  color: var(--sunset-ink);
}

/* ─── Precio: anclaje del fundador ────────────────────────────────────── */
.amount-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.amount-next {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--text-on-light-tertiary);
  padding: 4px 10px;
  border: 1px dashed var(--paper-line);
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.amount-next b { font-weight: var(--font-weight-medium); color: var(--text-on-light-secondary); }

/* ─── Cierre: el eco del eslogan ──────────────────────────────────────── */
.closer h2 { line-height: 1.12; }
.closer-em {
  font-style: normal;
  background: linear-gradient(100deg, var(--brand-sunset), var(--brand-amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@supports not (background-clip: text) {
  .closer-em { background: none; color: var(--brand-sunset); }
}

/* ─── Wordmark de cierre ──────────────────────────────────────────────
   Enorme, recortado por abajo y casi fundido con el fondo. La página
   termina en la marca sin gastar una sección más. */
.site-footer { position: relative; overflow: hidden; }
.foot-wordmark {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: clamp(90px, 17vw, 260px);
  line-height: 0.72;
  letter-spacing: -0.045em;
  text-align: center;
  color: var(--surface-2);
  user-select: none;
  pointer-events: none;
  margin-top: var(--space-9);
  margin-bottom: -0.12em;   /* recortado por la base */
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   BENTO — "todo lo demás", al modo Apple/Figma/Stripe

   Mosaico en rejilla de 3 columnas: el moodboard es la celda grande (2×2),
   hora dorada y biblioteca apilan a la derecha, y la tira de "nada sale de
   tu máquina" cierra a todo lo ancho. Una idea por celda; el visual manda.
   ═══════════════════════════════════════════════════════════════════════ */

.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(0, auto);
  gap: var(--space-5);
  margin-top: clamp(36px, 4.5vw, 56px);
}

.bento-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
.bento-card:hover {
  transform: translateY(-3px);
  border-color: #D8D3CA;
  box-shadow: 0 22px 48px -30px rgba(26, 25, 23, 0.38);
}

.bento-offline { grid-column: span 2; }

.bento-copy h3 {
  font-size: var(--text-md);
  margin-bottom: var(--space-2);
}
.bento-copy p {
  font-size: var(--web-small);
  color: var(--text-on-light-secondary);
  max-width: 52ch;
}

/* El visual llena lo que el texto no usa: es lo que hace que las celdas de
   distinto tamaño se sientan llenas y no estiradas. */
.bento-visual { flex: 1; min-height: 0; }

/* La tira ancha se parte en dos: texto a la izquierda, archivos a la derecha. */
.bento-offline {
  flex-direction: row;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}
.bento-offline .bento-copy { flex: 1; }
.bento-offline .bento-visual { flex: 1.2; }

@media (max-width: 1024px) {
  .bento { grid-template-columns: 1fr; }
  .bento-offline { grid-column: auto; flex-direction: column; align-items: stretch; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LA APP REAL — MacBook del hero y marcos de captura

   El patrón de developer.apple.com: el producto se enseña dentro de la
   máquina en la que vive. Las capturas son de la app real corriendo
   (proyecto demo "Neon Pulse"), no maquetas.
   ═══════════════════════════════════════════════════════════════════════ */

.mac {
  max-width: 100%;
  margin: clamp(32px, 5vh, 60px) auto 0;
}
/* Pantalla: bisel negro con esquinas generosas, borde fino para separarse
   del fondo también negro, y un brillo de hora dorada debajo. */
.mac-screen {
  padding: clamp(10px, 1.4vw, 18px) clamp(10px, 1.4vw, 18px) clamp(12px, 1.7vw, 22px);
  background: #060606;
  border: 1px solid var(--border-strong);
  border-radius: clamp(14px, 1.8vw, 24px) clamp(14px, 1.8vw, 24px) 0 0;
  box-shadow:
    0 60px 140px -50px rgba(232, 129, 74, 0.28),
    var(--elev-4);
}
.mac-screen img {
  width: 100%;
  height: auto;
  border-radius: clamp(6px, 0.8vw, 10px);
  display: block;
}
/* Base de aluminio con su muesca central. */
.mac-base {
  position: relative;
  height: clamp(12px, 1.6vw, 20px);
  margin-inline: -3.5%;
  background: linear-gradient(180deg, #3d3d40, #232326 55%, #1a1a1c);
  border-radius: 0 0 clamp(10px, 1.4vw, 18px) clamp(10px, 1.4vw, 18px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 0;
}
.mac-base::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 12%;
  height: 45%;
  background: linear-gradient(180deg, #101012, #2a2a2d);
  border-radius: 0 0 10px 10px;
}

/* ─── Filas de features ───────────────────────────────────────────────── */
.feature {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding-block: clamp(40px, 6vw, 88px);
}
.feature + .feature { border-top: 1px solid var(--paper-line-soft); }
.feature-flip .feature-copy { order: 2; }
.feature-flip .shotframe { order: 1; }
.feature-copy h2 { margin-top: var(--space-4); }
.feature-copy p { margin-top: var(--space-5); max-width: 48ch; }
.feature-em { font-style: normal; font-family: var(--font-mono); font-size: 0.85em; color: var(--sunset-ink); }

/* Marco de captura: la app tal cual, con borde de ventana y sombra. */
.shotframe {
  margin: 0;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-1);
  box-shadow: 0 32px 64px -36px rgba(26, 25, 23, 0.45);
}
.shotframe img { width: 100%; height: auto; display: block; }
/* La captura alta (el modal de export) no debe dominar la fila. */
.shotframe-tall { max-width: 460px; justify-self: center; }

@media (max-width: 1024px) {
  .feature { grid-template-columns: 1fr; }
  .feature-flip .feature-copy { order: 1; }
  .feature-flip .shotframe { order: 2; }
  .shotframe-tall { max-width: 400px; justify-self: start; }
  .mac-base { margin-inline: -2%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PASADA "LA APP DE VERDAD, EN SU MAC" (12-08)
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── El Mac, plateado ────────────────────────────────────────────────
   Sobre fondo negro un portátil negro desaparecía: el chasis pasa a
   aluminio — bisel plateado alrededor de la pantalla y base a juego —
   y la pantalla queda negra dentro, como el hardware real. */
/* Gris espacial: chasis oscuro con canto iluminado — se recorta del fondo
   negro por el borde alto y el brillo, no por ser claro. */
.mac-screen {
  background: linear-gradient(180deg, #7c7d83, #55565c 55%, #3e3f45);
  border: 1px solid #26272b;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 60px 140px -50px rgba(232, 129, 74, 0.30),
    var(--elev-4);
}
.mac-screen img {
  border: 1px solid #17171a;
  border-radius: clamp(4px, 0.5vw, 8px);
  background: #060606;
  box-shadow: 0 0 0 clamp(3px, 0.45vw, 6px) #0a0a0c;
}
.mac-base {
  background: linear-gradient(180deg, #85868c, #5a5b61 45%, #35363b);
  border: 1px solid #232428;
  border-top: 1px solid #97989e;
}
.mac-base::before {
  background: linear-gradient(180deg, #3a3b40, #6a6b71);
  border-radius: 0 0 10px 10px;
}

/* ─── Bento a dos columnas ────────────────────────────────────────────── */
.bento-2 { grid-template-columns: repeat(2, 1fr); }
.bento-2 .mini-sun { display: grid; align-content: center; height: 100%; }
@media (max-width: 1024px) {
  .bento-2 { grid-template-columns: 1fr; }
}

/* ─── Marco de captura sobre lienzo oscuro ────────────────────────────── */
.shotframe-dark {
  border-color: var(--border-strong);
  background: var(--surface-1);
  box-shadow: 0 40px 90px -40px rgba(232, 129, 74, 0.25), var(--elev-4);
  max-width: 1040px;
  margin-inline: auto;
}

/* ─── Capacidades del canvas: hechos en fila ──────────────────────────── */
.canvas-caps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding: 0;
}
.canvas-caps li {
  padding: 8px var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}
.canvas-caps li:nth-child(odd) { border-color: rgba(232, 129, 74, 0.28); color: var(--brand-sunset); }

/* ─── La hoja del PDF real, flotando ──────────────────────────────────
   El documento generado por la app, girado sobre la mesa. Sin hover. La segunda hoja asoma detrás (::before del contenedor,
   ya definida en el bloque del split). */
.paper-real {
  margin: 0;
  position: relative;
  transform: rotate(-1.2deg);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 34px 70px -30px rgba(26, 25, 23, 0.45);
}
.paper-real img { width: 100%; height: auto; display: block; }

/* ─── Dos hojas del PDF, apiladas ─────────────────────────────────────
   La página de planos (clara) detrás, arriba a la izquierda, girada; la
   portada (oscura) delante, a la derecha. Mismo tamaño de hoja: el abanico
   deja ver el título y la onda de la portada. Al pasar el ratón se
   enderezan un poco. */
.paper-stack {
  margin: 0 0 0 -12%;   /* se asoma un poco a la columna del texto */
  position: relative;
  width: 124%;
  padding: 0 0 0 38%;
}
.paper-stack img {
  display: block;
  height: auto;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
}
.paper-sheet-front {
  position: relative;
  width: 62%;
  margin-top: 12%;
  background: var(--paper);
  box-shadow: 0 34px 70px -30px rgba(26, 25, 23, 0.5);
  transform: rotate(1.5deg);
}
.paper-sheet-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 62%;
  box-shadow: 0 24px 50px -28px rgba(26, 25, 23, 0.6);
  transform: rotate(-3deg);
  transform-origin: top left;
}
@media (max-width: 1024px) {
  .paper-stack { width: 100%; max-width: 520px; margin-inline: auto; }
}

/* ─── Founder: retrato en círculo + bio ───────────────────────────────
   El retrato es un recorte con alfa que mira arriba-derecha: va a la
   izquierda para que la mirada apunte al texto, dentro de un círculo con un
   lavado sutil que lo despega de la banda oscura. El encuadre lo hace el
   object-position (la cara vive en el tercio alto del recorte). */
.founder-layout {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.founder-layout:has(.founder-photo) {
  grid-template-columns: minmax(150px, 210px) 1fr;
}
.founder-photo {
  margin: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: radial-gradient(circle at 32% 24%, rgba(232, 181, 71, 0.14), rgba(255, 255, 255, 0.04) 62%);
}
.founder-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 8%;
}
.founder-copy { max-width: 64ch; }
.founder-bio {
  margin-top: var(--space-6);
  font-size: var(--web-small);
  line-height: 1.7;
  color: var(--text-secondary);
}
.founder-sign {
  margin-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
@media (max-width: 768px) {
  .founder-layout:has(.founder-photo) { grid-template-columns: 1fr; }
  .founder-photo { width: 170px; margin-inline: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   EL WORDMARK — PREframe

   El PRE lleva el degradado de marca (sunset → ámbar); el resto hereda el
   color del contexto. `site.js` lo renderiza en cada [data-brand="name"],
   así que esta regla es la única definición visual de la marca escrita.
   ═══════════════════════════════════════════════════════════════════════ */

.wm-pre {
  font-weight: inherit;               /* <b> solo como gancho, no engorda */
  background: linear-gradient(100deg, var(--brand-sunset), var(--brand-amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* `background-clip: text` recorta el degradado a la CAJA del <b>, no a la
     tinta. Los títulos de marca llevan tracking negativo (-0.05em en el hero,
     -0.045em en el footer) y ese hueco se descuenta TAMBIÉN después de la
     última letra: la caja cerraba 2.2px antes que la "e", y por ese filo
     asomaba el degradado blanco del h1 que hay debajo. El padding ensancha la
     caja de recorte y el margen negativo devuelve la posición, así que la
     letra sale entera y el layout no se mueve. No puede pintar de más: el
     degradado sigue recortado a los glifos de "Pre", nunca a los de "Frame". */
  padding-right: 0.08em;
  margin-right: -0.08em;
}
@supports not (background-clip: text) {
  .wm-pre { background: none; color: var(--brand-sunset); }
}

/* En el título del hero, el degradado del PRE gana al degradado blanco del
   conjunto (ambos usan clip; el del hijo manda sobre su propio texto). En el
   wordmark gigante del footer el PRE se atenúa para seguir siendo marca de
   agua y no un cartel. */
.foot-wordmark .wm-pre { opacity: 0.45; }

/* ═══════════════════════════════════════════════════════════════════════
   PACKS DE CRÉDITOS — informativo, sin botones hasta validar Stripe
   ═══════════════════════════════════════════════════════════════════════ */

.packs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-top: clamp(32px, 4vw, 52px);
  align-items: stretch;
}
.pack {
  position: relative;
  padding: var(--space-7) var(--space-6);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-xl);
  background: var(--paper);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
.pack:hover {
  transform: translateY(-3px);
  border-color: #D8D3CA;
  box-shadow: 0 22px 48px -30px rgba(26, 25, 23, 0.38);
}
.pack .amount { margin: var(--space-3) 0 var(--space-1); font-size: 38px; }
.pack-per {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--text-on-light-secondary);
  font-variant-numeric: tabular-nums;
}
.pack-save {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--paper-line-soft);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--sunset-ink);
}
.pack-save.is-base { color: var(--text-on-light-tertiary); }

/* El más popular: anillo de marca y su insignia. */
.pack.is-popular {
  border-color: var(--brand-sunset);
  box-shadow: 0 0 0 1px var(--brand-sunset);
}
.pack.is-popular:hover {
  box-shadow: 0 0 0 1px var(--brand-sunset), 0 22px 48px -30px rgba(232, 129, 74, 0.5);
}
.pack-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  padding: 5px var(--space-4);
  border-radius: var(--radius-full);
  background: var(--brand-sunset);
  color: var(--on-brand);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (max-width: 1024px) { .packs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .packs { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════
   EL CANVAS, EN MOCKUP FIEL — sección 2

   Réplica de los objetos reales del Mood Bar (imagen, vídeo, nota, paleta,
   plano, curva) sobre el canvas de puntos oscuro, dentro de la sección
   blanca. Construido como mockup para poder enseñar una paleta ajena al
   naranja de marca y referencias sin copyright.
   ═══════════════════════════════════════════════════════════════════════ */

.canvasmock {
  max-width: 1080px;
  margin: var(--space-8) auto 0;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface-1);
  box-shadow: 0 40px 90px -44px rgba(26, 25, 23, 0.5);
  text-align: left;
}

/* Filtros por sección, como en la app. */
.cm-chips {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-default);
  overflow-x: auto;
}
.cm-chips span {
  flex: none;
  padding: 6px var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.cm-chips .is-active { border-color: var(--brand-sunset); color: var(--brand-sunset); }

/* El tablero: canvas de puntos con las tarjetas encima. */
.cm-board {
  position: relative;
  height: clamp(380px, 46vw, 560px);
  background-color: var(--surface-1);
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 20px 20px;
}

.cm-card {
  position: absolute;
  margin: 0;
  padding: var(--space-2);
  background: var(--surface-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.9);
}
/* Sin hover: el mockup es una foto del producto, no un juguete. */
.cm-card img { width: 100%; height: auto; display: block; border-radius: var(--radius-xs); }
.cm-cap {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
.cm-img figcaption {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}

/* Vídeo de referencia. */
.cm-yt-thumb { position: relative; }
.cm-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: rgba(8, 8, 8, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.cm-play::after {
  content: '';
  position: absolute;
  left: 55%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-left: 10px solid var(--text-primary);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.cm-dur {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: rgba(8, 8, 8, 0.8);
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-primary);
}
.cm-yt-title { margin-top: var(--space-2); font-size: 12px; line-height: 1.35; color: var(--text-primary); }

/* Nota — Fraunces cursiva: contenido tecleado por el usuario, diegético. */
.cm-note {
  padding: var(--space-4);
  font-family: var(--font-focus-display);
  font-style: italic;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-primary);
  background: var(--brand-sunset-subtle);
  border-color: rgba(232, 129, 74, 0.3);
}

/* Card de plano. */
.cm-shot-thumb { position: relative; }
.cm-shot-name { margin-top: var(--space-2); font-size: 12.5px; color: var(--text-primary); }
.cm-gear {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-tertiary);
}

/* Paleta — a propósito SIN los naranjas de marca. */
.cm-swatches { display: flex; height: 44px; border-radius: var(--radius-xs); overflow: hidden; }
.cm-swatches i { flex: 1; }
.cm-hexes {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-tertiary);
}

/* Curva. */
.cm-curve svg { width: 100%; height: 64px; display: block; margin-top: var(--space-2); }
.cm-curve-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Barra de herramientas del canvas. */
.cm-toolbar {
  position: absolute;
  left: 50%;
  bottom: var(--space-4);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: rgba(8, 8, 8, 0.85);
  backdrop-filter: blur(8px);
}
.cm-toolbar span {
  padding: 7px var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.cm-toolbar b {
  padding: 7px var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--brand-sunset);
  color: var(--on-brand);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
}
.cm-zoom {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
}

/* Los chips de capacidades sobre lienzo claro. */
.canvas-caps-light li { border-color: var(--paper-line); color: var(--text-on-light-secondary); }
.canvas-caps-light li:nth-child(odd) { border-color: rgba(176, 82, 31, 0.3); color: var(--sunset-ink); }

@media (max-width: 768px) {
  .cm-board { height: 520px; }
  /* En estrecho, las tarjetas se reparten en dos columnas holgadas. */
  .cm-card { width: 44% !important; }
  .cm-note { display: none; }
  .cm-toolbar span:nth-child(3), .cm-toolbar span:nth-child(4) { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FEATURE A LO GRANDE — imagen a todo el ancho, texto sobre degradado

   Para un portátil de 16": la captura ES la sección, y el texto vive sobre
   un degradado lateral oscuro que garantiza contraste tanto sobre la app
   clara (Ficha) como sobre la oscura (galería).
   ═══════════════════════════════════════════════════════════════════════ */

.wrap-wide { max-width: 1400px; }

.feature-big {
  position: relative;
  margin: 0;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface-1);
  box-shadow: 0 40px 90px -44px rgba(26, 25, 23, 0.5);
}
.feature-big > img { width: 100%; height: auto; display: block; }

.fb-copy {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(46%, 560px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-4);
  padding: clamp(24px, 4vw, 64px);
  background: linear-gradient(90deg, rgba(8, 8, 8, 0.92) 0%, rgba(8, 8, 8, 0.78) 55%, rgba(8, 8, 8, 0.35) 82%, transparent);
  color: var(--text-primary);
}
.feature-big.is-right .fb-copy,
.bg-feature.is-right .fb-copy {
  inset: 0 0 0 auto;
  background: linear-gradient(270deg, rgba(8, 8, 8, 0.92) 0%, rgba(8, 8, 8, 0.78) 55%, rgba(8, 8, 8, 0.35) 82%, transparent);
}
.fb-copy h2 { color: var(--text-primary); font-size: clamp(26px, 2.9vw, 44px); }
.fb-copy p { color: var(--text-tertiary); font-size: var(--web-small); max-width: 42ch; }
.fb-copy strong { color: var(--text-primary); font-weight: var(--font-weight-semibold); }

/* En pantallas medias y móvil el degradado lateral se queda sin sitio: el
   texto pasa a bloque sólido bajo la imagen. */
@media (max-width: 900px) {
  .fb-copy,
  .feature-big.is-right .fb-copy,
.bg-feature.is-right .fb-copy {
    position: static;
    width: 100%;
    background: var(--surface-1);
    padding: var(--space-6);
  }
}

/* ─── El statement largo: primera frase grande, resto legible ─────────── */
.statement .statement-rest {
  max-width: 62ch;
  margin: var(--space-7) auto 0;
  text-align: left;
  display: grid;
  gap: var(--space-4);
}
.statement .statement-rest p {
  margin: 0;
  max-width: none;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.7;
  color: var(--text-on-light-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════
   FEATURE COMO FONDO DE SECCIÓN — sin recuadro

   La captura no es una lámina dentro de la sección: ES la sección, de borde
   a borde, con el texto sobre un velo lateral. Sustituye al formato
   .feature-big enmarcado.
   ═══════════════════════════════════════════════════════════════════════ */

.bg-feature {
  position: relative;
  overflow: hidden;
  background: var(--surface-0);
}
.bg-feature-img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 420px;
  object-fit: cover;
}
/* El velo y el texto reutilizan .fb-copy, aquí sin radio que respetar. */
.bg-feature .fb-copy { z-index: 1; }

@media (max-width: 900px) {
  .bg-feature .fb-copy { position: static; width: 100%; background: var(--surface-1); }
}

/* ─── hero-who: blanco, con music y story encendidos ──────────────────── */
.hero-who { color: var(--text-primary); }
.hero-who em {
  font-style: normal;
  background: linear-gradient(100deg, var(--brand-sunset), var(--brand-amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@supports not (background-clip: text) {
  .hero-who em { background: none; color: var(--brand-sunset); }
}

/* ═══════════════════════════════════════════════════════════════════════
   TITULAR CON DEGRADADO SUTIL DE MARCA — sobre blanco puro

   El patrón de las páginas de producto de Apple ("Juntos todo es mejor."):
   el titular arranca en tinta y se va calentando hacia el naranja de marca
   al final del recorrido. Sutil: la mayor parte del texto sigue oscura.
   ═══════════════════════════════════════════════════════════════════════ */

.title-grad {
  background: linear-gradient(100deg, #1A1917 0%, #513122 55%, var(--sunset-ink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@supports not (background-clip: text) {
  .title-grad { background: none; color: var(--text-on-light-primary); }
}

/* La ventana oscura sobre lienzo claro: el borde blanco-alfa desaparece
   sobre blanco; se sustituye por uno entintado y una sombra de objeto
   sobre mesa. */
.canvas-light .duo-window {
  border-color: rgba(26, 25, 23, 0.16);
  box-shadow: 0 34px 70px -36px rgba(26, 25, 23, 0.45);
}

/* ═══════════════════════════════════════════════════════════════════════
   ZOOM AL SCROLL — la captura crece hasta llenar la pantalla

   `--zf` va de 0 (imagen con márgenes y esquinas) a 1 (pantalla completa);
   lo escribe motion.js leyendo el avance del scroll dentro de la sección.
   Sin JavaScript, o con reducir-movimiento, --zf vale 1: imagen llena y
   texto visible — nadie pierde contenido.
   ═══════════════════════════════════════════════════════════════════════ */

.zoom-feature {
  --zf: 1;
  --zf-copy: 1;
  position: relative;
  /* Un solo viewport: el crecimiento ocurre en la aproximación, el negro
     funde al llegar arriba, y no hay NINGÚN tramo anclado — el siguiente
     gesto de scroll ya la deja atrás. */
  height: 100vh;
  background: var(--paper);
}
.zf-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.zf-media {
  margin: 0;
  width: calc(68vw + 32vw * var(--zf));
  height: calc(60vh + 40vh * var(--zf));
  border-radius: calc(26px * (1 - var(--zf)));
  overflow: hidden;
  box-shadow: 0 40px 90px -44px rgba(26, 25, 23, 0.5);
}
.zf-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* El bloque de texto: negro translúcido, centrado sobre la imagen. */
/* El bloque negro: PANTALLA COMPLETA y sin blur, pero TRANSLÚCIDO — la
   interfaz sigue viéndose detrás. El fundido anima la opacidad del bloque
   entero (0 → 1), y el tope de oscuridad lo pone el alpha del fondo: el
   texto llega nítido al 100% mientras el negro nunca pasa del 55%. */
.zf-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0;
  padding: clamp(24px, 5vw, 72px);
  background: rgba(8, 8, 8, 0.55);
  text-align: center;
  color: var(--text-primary);
  opacity: var(--zf-copy);
  pointer-events: none;
}
.zf-copy > * { max-width: 640px; }
.zf-copy h2 { color: var(--text-primary); margin-top: var(--space-4); font-size: clamp(28px, 3.4vw, 48px); }
/* Secundario más claro y una sombra corta: legible también sobre las zonas
   blancas de la interfaz que asoman tras el velo, sin oscurecerlo más. */
.zf-copy p { margin-top: var(--space-5); color: var(--text-secondary); font-size: var(--web-small); }
.zf-copy h2, .zf-copy p { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45); }
.zf-copy strong { color: var(--text-primary); }

@media (max-width: 900px) {
  .zoom-feature { height: 100vh; }
  .zf-media { width: calc(88vw + 12vw * var(--zf)); }
}
@media (prefers-reduced-motion: reduce) {
  .zoom-feature { height: auto; }
  .zf-sticky { position: static; height: auto; min-height: 70vh; }
}

/* ─── Card solar: etiqueta fija en la ventana + puntero que nombra ────── */

/* La ventana elegida lleva su nombre encima, quieto. */
.sunwin { overflow: visible; }
.sunwin-tag {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: var(--text-on-light-primary);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Piquito del tag hacia la ventana. */
.sunwin-tag::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--text-on-light-primary);
}

/* La barra necesita aire arriba (tag de la ventana) y abajo (el que viaja). */
.bento-2 .mini-sun .sunbar { margin-top: var(--space-6); margin-bottom: var(--space-7); }

/* ─── El fantasma de la card solar ────────────────────────────────────
   Mismo lenguaje que el puntero del timeline: flecha naranja que agarra la
   ventana y la pasea por el día. El pop del tag ya existe (.is-pop). */
.mini-sun { position: relative; }
.sun-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.sun-cursor.is-on { opacity: 1; }
.sun-cursor svg {
  width: 18px;
  height: 18px;
  fill: var(--brand-sunset);
  stroke: #160B04;
  stroke-width: 1;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
  transition: transform var(--dur-instant) var(--ease-out);
}
.sun-cursor.is-down svg { transform: scale(0.82); }

/* El tag de la ventana también hace pop al renombrarse. */
.sunwin-tag.is-pop { animation: sun-tag-pop var(--dur-base) var(--ease-spring); }

/* La ventana se mueve con transición apagada: la conduce el rAF. */
.mini-sun .sunwin { transition: none; }