/* Tokens de la página de asesorías.
   Base: la plantilla de #historia (azul petróleo, crema y tipografía Outfit).
   Añadidos: portada de cine (bandas, grano, viñeta, brillo del logo), marcas sobre las fotos reales de la historia
   y huecos de casos con silueta.
   Los colores literales solo viven aquí. */

@font-face {
  font-family: "Outfit";
  src: url("/asesorias/assets/fonts/outfit-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

:root {
  /* Superficies */
  --as-walnut: #061119;
  --as-bark: #0d202a;
  --as-nutrition-bg: #10242d;
  --as-panel: rgba(6, 17, 25, .78);
  --as-translucent: rgba(6, 17, 25, .68);
  --as-chip-bg: rgba(13, 32, 42, .82);

  /* Texto y acento */
  --as-cream: #e8f0f2;
  --as-soft-cream: #acc0c7;
  --as-ink-muted: #8ca7b1;
  --as-ember: #4bb0d0;
  --as-copper: #4bb0d0;
  --as-hero-blue: #64c1dc;

  /* Líneas, velos y sombras */
  --as-line: rgba(232, 240, 242, .17);
  --as-line-strong: rgba(232, 240, 242, .42);
  --as-header-bg: rgba(4, 15, 22, .26);
  --as-header-bg-scrolled: rgba(4, 15, 22, .82);
  --as-header-border: 1px solid rgba(232, 240, 242, .12);
  --as-call-border: 1px solid rgba(232, 240, 242, .42);
  --as-progress-light: rgba(232, 240, 242, .22);
  --as-hero-shade: rgba(3, 13, 19, .88);
  --as-hero-shade-soft: rgba(3, 13, 19, .14);
  --as-scene-veil: rgba(6, 17, 25, .92);
  --as-scene-veil-soft: rgba(6, 17, 25, .55);
  --as-scene-veil-clear: rgba(6, 17, 25, 0);
  --as-logo-glow: drop-shadow(0 0 12px rgba(63, 174, 207, .28));
  --as-logo-glow-strong: drop-shadow(0 0 28px rgba(63, 174, 207, .42));
  --as-glow-blue: 0 0 24px rgba(75, 176, 208, .55);
  --as-callout-shadow: 0 0 0 6px rgba(7, 133, 170, .22);
  --as-transparent: transparent;

  /* Portada de cine */
  --as-letterbox: #02080c;
  --as-vignette: radial-gradient(120% 90% at 50% 45%, rgba(2, 8, 12, 0) 52%, rgba(2, 8, 12, .72) 100%);
  --as-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  --as-grain-opacity: .07;
  --as-sheen: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(220, 244, 252, .75) 50%, rgba(255, 255, 255, 0) 62%);
  --as-title-shadow: 0 2px 30px rgba(2, 8, 12, .45);
  --as-band: clamp(18px, 5.5svh, 56px);
  --as-band-mobile: clamp(12px, 3svh, 28px);

  /* Cuerpo 3D: notas y visor de fotos */
  --as-note-bg: rgba(6, 17, 25, .74);
  --as-note-dot-shadow: 0 0 0 5px rgba(75, 176, 208, .2), 0 0 14px rgba(75, 176, 208, .55);
  --as-viewfinder: rgba(232, 240, 242, .8);
  --as-viewfinder-dim: rgba(232, 240, 242, .2);
  --as-phase-track: rgba(232, 240, 242, .16);

  /* Historia con fotos reales: marcas encima de la foto (no son medidas) */
  --as-photo-shade: linear-gradient(180deg, rgba(3, 13, 19, .34) 0%, rgba(3, 13, 19, 0) 26%, rgba(3, 13, 19, 0) 70%, rgba(3, 13, 19, .42) 100%);
  --as-scan-glow: 0 0 14px rgba(100, 193, 220, .9);
  --as-scan-trail: linear-gradient(180deg, rgba(100, 193, 220, 0), rgba(100, 193, 220, .16));
  --as-pulse: rgba(100, 193, 220, .9);
  --as-particle: #bfe9f5;
  --as-particle-glow: 0 0 10px rgba(100, 193, 220, .85);
  --as-night: linear-gradient(180deg, rgba(2, 8, 22, .86) 0%, rgba(4, 16, 38, .7) 100%);
  --as-moon-shadow: inset -3px -2px 0 0 #e8f0f2;
  --as-tape: rgba(232, 240, 242, .95);
  --as-tape-ticks: repeating-linear-gradient(90deg, rgba(232, 240, 242, .85) 0 1px, rgba(232, 240, 242, 0) 1px 7px);
  --as-tape-ticks-vertical: repeating-linear-gradient(180deg, rgba(232, 240, 242, .85) 0 1px, rgba(232, 240, 242, 0) 1px 7px);
  --as-stagger: 140ms;

  /* Cuerpo 3D en vivo (cuerpo3d.js los lee con getComputedStyle; three.js no entiende var()) */
  --as-3d-musculo: #8e1a1c;
  --as-3d-musculo-brillo: #ff6a5c;
  --as-3d-tendon: #efeadf;
  --as-3d-hueso: #e7dcc4;
  --as-3d-piel: #9fd8ea;
  --as-3d-piel-dentro: #409ebf;
  --as-3d-piel-borde: #bfedff;
  --as-3d-reparar: #64c1dc;
  --as-3d-anillo: #e8f0f2;
  --as-3d-luz-clave: #fff3e6;
  --as-3d-luz-relleno: #cfe6ff;
  --as-3d-contraluz-a: #64c1dc;
  --as-3d-contraluz-b: #4bb0d0;
  --as-3d-fondo: radial-gradient(70% 62% at 50% 46%, rgba(23, 62, 79, .55) 0%, rgba(13, 32, 42, .5) 45%, rgba(6, 17, 25, 0) 100%), #071620;
  --as-3d-suelo: radial-gradient(50% 50% at 50% 50%, rgba(100, 193, 220, .2) 0%, rgba(100, 193, 220, 0) 100%);

  /* Casos: silueta de espera */
  --as-silhouette: rgba(140, 167, 177, .26);
  --as-silhouette-after: rgba(100, 193, 220, .34);
  --as-slot-bg: linear-gradient(180deg, rgba(13, 32, 42, .9), rgba(6, 17, 25, .9));
  --as-slot-border: 1px dashed rgba(232, 240, 242, .24);

  /* Antes/ahora */
  --as-handle-shadow: 0 0 0 1px rgba(6, 17, 25, .3), 0 8px 24px rgba(3, 13, 19, .5);
  --as-label-bg: rgba(6, 17, 25, .62);

  /* Tipografía */
  --as-font-display: "Outfit", "Arial", sans-serif;
  --as-font-body: "Outfit", "Arial", sans-serif;
  --as-hero-display: clamp(4.1rem, 7.4vw, 8.1rem);
  --as-hero-display-mobile: clamp(2.8rem, 12vw, 4.6rem);
  --as-hero-display-mobile-accent: clamp(1.9rem, 8.8vw, 3.3rem);
  --as-hero-leading: .89;
  --as-hero-tracking: -.07em;
  --as-display: clamp(2.6rem, 4.6vw, 4.6rem);
  --as-display-mobile: clamp(2rem, 8.4vw, 3.1rem);
  --as-heading: clamp(2.6rem, 5vw, 5.1rem);
  --as-heading-mobile: clamp(2.2rem, 9.6vw, 3.4rem);
  --as-subheading: clamp(1.4rem, 2vw, 1.9rem);
  --as-body: clamp(1.04rem, 1.2vw, 1.22rem);
  --as-body-large: clamp(1.2rem, 1.8vw, 1.7rem);
  --as-small: .875rem;
  --as-tiny-readable: .75rem;
  --as-row-head: 1.28rem;
  --as-line-display: 1.02;
  --as-line-body: 1.5;
  --as-line-small: 1.3;
  --as-tracking-tight: -.035em;
  --as-tracking-normal: 0;
  --as-tracking-wide: .12em;

  /* Espacio */
  --as-gutter: clamp(1.25rem, 4vw, 4.5rem);
  --as-header-height: 86px;
  --as-header-height-mobile: 64px;
  --as-safe-bottom: env(safe-area-inset-bottom, 0px);
  --as-space-0: .25rem;
  --as-space-1: .5rem;
  --as-space-2: .75rem;
  --as-space-3: 1rem;
  --as-space-4: 1.5rem;
  --as-space-5: 2rem;
  --as-space-6: 3rem;
  --as-space-7: 4rem;
  --as-space-8: 6rem;
  --as-space-9: 9rem;

  /* Forma */
  --as-radius-pill: 999px;
  --as-focus: 3px solid var(--as-cream);

  /* Movimiento */
  --as-ease-standard: ease;
  --as-ease-out: cubic-bezier(.23, 1, .32, 1);
  --as-ease-move: cubic-bezier(.77, 0, .175, 1);
  --as-press: 120ms;
  --as-fast: 180ms;
  --as-medium: 420ms;
  --as-chapter: 550ms;
  --as-slow: 900ms;
  --as-intro: 1600ms;
  --as-reveal: 1100ms;
  --as-sheen-time: 2400ms;
  --as-zero: 0ms;
}

/* Movimiento reducido: sin desplazamientos (eso lo quita asesorias.css), pero los fundidos siguen, cortos. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --as-fast: 0ms;
    --as-press: 0ms;
    --as-medium: 200ms;
    --as-chapter: 240ms;
    --as-slow: 240ms;
    --as-intro: 0ms;
    --as-reveal: 0ms;
    --as-sheen-time: 0ms;
  }
}