/* LUM360 · video y fotografía v3 · capa 1 de 4 · tokens (mismo sistema de diseño que las demás páginas de servicio v3; alcance: body.vp-page)
 * enrichment: WebGL «De la maqueta a la visita» (escena por actos) con respaldo en planta SVG + fotografía · nav/footer: chrome de producción conservado
 * Mismo sistema de diseño y nombres de tokens que /servicios/desarrollo-web-experiencias-digitales (v3); alcance propio: body.vp-page
 * capa 1 de 4 · tokens — layout.css · components.css · scenes.css consumen estos nombres; ningún color ni fuente se declara fuera de aquí
 */

/* Fuentes de respaldo con métricas ajustadas a las de marca (medidas con qa/, 2026-10-01):
   la hoja de Google Fonts ya no bloquea el primer render, y cuando la tipografía llega el texto
   no cambia de ancho ni de renglones. Nombres únicos: no afectan a otras páginas. */
@font-face {
  font-family: "LUM360 Cormorant Fallback";
  src: local("Georgia");
  size-adjust: 87.8%;
  ascent-override: 104.8%;
  descent-override: 33%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "LUM360 Inter Fallback";
  src: local("Arial");
  size-adjust: 106.9%;
  ascent-override: 90.7%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

body.vp-page {
  /* Superficies y tinta — oscuro: «obra de noche» */
  --ws-paper: oklch(13% 0.010 82);
  --ws-paper-2: oklch(16% 0.012 82);
  --ws-card: oklch(19% 0.014 82);
  --ws-card-2: oklch(22% 0.016 82);
  --ws-ink: oklch(94% 0.012 82);
  --ws-muted: oklch(77% 0.012 82);
  --ws-subtle: oklch(64% 0.012 82);
  --ws-rule: oklch(30% 0.018 82);
  --ws-rule-strong: oklch(43% 0.028 82);

  /* Acento: una sola familia champagne */
  --ws-accent: oklch(78% 0.13 85);
  --ws-accent-strong: oklch(86% 0.13 88);
  --ws-accent-soft: oklch(26% 0.04 84);
  --ws-accent-ink: oklch(18% 0.02 82);
  --ws-focus: oklch(87% 0.14 88);
  --ws-success: oklch(76% 0.12 145);

  /* Velos para que el texto se lea sobre la escena (modificadores, no paleta) */
  --ws-scrim: oklch(13% 0.010 82 / 0.86);
  --ws-scrim-soft: oklch(13% 0.010 82 / 0.58);
  --ws-scrim-none: oklch(13% 0.010 82 / 0);
  --ws-shadow: oklch(4% 0.01 82 / 0.5);

  /* Escena: los lee theme.js y los convierte a color lineal para WebGL */
  --ws-scene-bg: oklch(13% 0.010 82);
  --ws-scene-grid: oklch(78% 0.07 85);
  --ws-scene-grid-alpha: 0.13;
  --ws-scene-line: oklch(82% 0.06 86);
  --ws-scene-line-strong: oklch(86% 0.13 88);
  --ws-scene-card: oklch(23% 0.016 82);
  --ws-scene-card-top: oklch(28% 0.018 82);
  --ws-scene-sheet: oklch(78% 0.07 85);
  --ws-scene-shadow-alpha: 0;
  --ws-scene-pool-alpha: 0.16;
  --ws-scene-device: oklch(24% 0.01 82);
  --ws-scene-device-edge: oklch(58% 0.04 84);
  --ws-scene-pulse: oklch(88% 0.14 90);
  --ws-scene-bloom: 0.34;


  /* Tipografía: la pareja de marca, sin tercera familia */
  --ws-font-display: "Cormorant Garamond", "LUM360 Cormorant Fallback", Georgia, serif;
  --ws-font-body: "Inter", "LUM360 Inter Fallback", Arial, sans-serif;

  --ws-text-xs: 0.6875rem;
  --ws-text-sm: 0.8125rem;
  --ws-text-base: 1rem;
  --ws-text-md: 1.125rem;
  --ws-text-lg: 1.5625rem;
  --ws-text-xl: 1.953rem;
  --ws-text-2xl: clamp(2.05rem, 2.6vw + 1.1rem, 3.05rem);
  --ws-text-display-s: clamp(2.2rem, 3.1vw + 1.1rem, 3.7rem);
  --ws-text-display: clamp(2.3rem, 3.6vw + 1.15rem, 4.4rem);

  /* Espacio: escala de 4 pt */
  --ws-space-3xs: 0.125rem;
  --ws-space-2xs: 0.25rem;
  --ws-space-xs: 0.5rem;
  --ws-space-sm: 0.75rem;
  --ws-space-md: 1rem;
  --ws-space-lg: 1.5rem;
  --ws-space-xl: 2.5rem;
  --ws-space-2xl: 4rem;
  --ws-space-3xl: 6rem;
  --ws-space-4xl: 9rem;

  /* mismo borde que la navegación del sitio: 1184 px de contenido, márgenes de 24 px en móvil */
  --ws-shell: min(74rem, 100% - 3rem);
  --ws-nav-h: 72px;
  --ws-hit: 48px;

  /* Movimiento: tres curvas, tres duraciones */
  --ws-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ws-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ws-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ws-dur-micro: 120ms;
  --ws-dur-short: 220ms;
  --ws-dur-long: 420ms;

  --ws-hairline: 1px;
  --ws-radius-sm: 0.25rem;
  --ws-radius-md: 0.5rem;
  --ws-radius-pill: 999px;

  /* Capas: por debajo del asistente (480), del consentimiento (500) y de la navegación (1000) */
  --ws-z-base: 1;
  --ws-z-raised: 10;
  --ws-z-stage-ui: 20;
  --ws-z-sticky: 200;
  --ws-z-dock: 470;
}

html[data-theme="light"] body.vp-page {
  /* Claro: «mesa de arquitecto» */
  --ws-paper: oklch(97% 0.012 82);
  --ws-paper-2: oklch(94% 0.014 82);
  --ws-card: oklch(99% 0.006 82);
  --ws-card-2: oklch(95.5% 0.012 82);
  --ws-ink: oklch(19% 0.014 82);
  --ws-muted: oklch(38% 0.014 82);
  --ws-subtle: oklch(48% 0.014 82);
  --ws-rule: oklch(84% 0.018 82);
  --ws-rule-strong: oklch(67% 0.03 82);

  --ws-accent: oklch(50% 0.115 80);
  --ws-accent-strong: oklch(42% 0.105 78);
  --ws-accent-soft: oklch(92% 0.04 84);
  --ws-accent-ink: #2b1f08; /* estándar dorado claro: tinta oscura sobre oro */
  --ws-accent-fill: #d9ab34;
  --ws-accent-line: #b98a1d;
  --ws-focus: oklch(42% 0.13 80);
  --ws-success: oklch(46% 0.12 145);

  --ws-scrim: oklch(97% 0.012 82 / 0.9);
  --ws-scrim-soft: oklch(97% 0.012 82 / 0.62);
  --ws-scrim-none: oklch(97% 0.012 82 / 0);
  --ws-shadow: oklch(30% 0.03 82 / 0.16);

  --ws-scene-bg: oklch(97% 0.012 82);
  --ws-scene-grid: oklch(50% 0.09 80);
  --ws-scene-grid-alpha: 0.17;
  --ws-scene-line: oklch(46% 0.07 80);
  --ws-scene-line-strong: oklch(42% 0.105 78);
  --ws-scene-card: oklch(95% 0.012 82);
  --ws-scene-card-top: oklch(99% 0.006 82);
  --ws-scene-sheet: oklch(50% 0.09 80);
  --ws-scene-shadow-alpha: 0.24;
  --ws-scene-pool-alpha: 0;
  --ws-scene-device: oklch(24% 0.01 82);
  --ws-scene-device-edge: oklch(38% 0.02 84);
  --ws-scene-pulse: oklch(44% 0.12 78);
  --ws-scene-bloom: 0.06;
}

/* Secciones de estudio: siempre oscuras (la página es cine), con el tema claro u oscuro del resto del sitio */
body.vp-page .vp-dark,
html[data-theme="light"] body.vp-page .vp-dark {
  --ws-paper: oklch(11% 0.008 82);
  --ws-paper-2: oklch(14% 0.010 82);
  --ws-card: oklch(17% 0.012 82);
  --ws-card-2: oklch(20% 0.014 82);
  --ws-ink: oklch(95% 0.010 82);
  --ws-muted: oklch(78% 0.012 82);
  --ws-subtle: oklch(66% 0.012 82);
  --ws-rule: oklch(30% 0.018 82);
  --ws-rule-strong: oklch(44% 0.028 82);
  --ws-accent: oklch(78% 0.13 85);
  --ws-accent-strong: oklch(86% 0.13 88);
  --ws-accent-soft: oklch(26% 0.04 84);
  --ws-accent-ink: oklch(16% 0.02 82);
  --ws-focus: oklch(87% 0.14 88);
  --ws-scrim: oklch(11% 0.008 82 / 0.82);
  --ws-shadow: oklch(2% 0.01 82 / 0.6);
  color: var(--ws-ink);
  background: var(--ws-paper);
}

body.vp-page {
  --vp-cyan: oklch(80% 0.11 220);
  --vp-rec: oklch(64% 0.23 27);
  --vp-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --vp-glass: oklch(14% 0.01 82 / 0.55);
  --vp-line: oklch(100% 0 0 / 0.14);
}