/* =========================================================
   Tokens estructurales: tamaños de texto, espaciados, formas,
   layout y movimiento. Los colores, tipografías y patrones
   viven en la capa de marca (marca.css).
   ========================================================= */
:root {
  /* Tamaños de texto */
  --texto-xs: 0.72rem;
  --texto-sm: 0.875rem;
  --texto-md: 1rem;
  --texto-lg: 1.15rem;
  --texto-xl: clamp(1.6rem, 2.6vw, 2.25rem);
  --texto-2xl: clamp(2.4rem, 5.2vw, 4.25rem);

  /* Espaciado */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 5rem;

  /* Forma */
  --radio-sm: 8px;
  --radio-md: 14px;
  --radio-lg: 22px;
  --radio-pill: 999px;
  --sombra-suave: 0 1px 2px rgba(31, 36, 41, 0.05), 0 8px 24px rgba(31, 36, 41, 0.06);
  --sombra-alta: 0 20px 60px rgba(31, 36, 41, 0.18);
  --sombra-borde-superior: inset 0 12px 20px -20px rgba(31, 36, 41, 0.7);

  /* Alto del pie de vidrio que se superpone a la última sección. */
  --alto-pie-superpuesto: 8rem;

  /* Fotografía de fondo de sección (.seccion--imagen). */
  --desenfoque-imagen: 14px;
  --opacidad-imagen: 0.28;

  /* Layout */
  --ancho-max: 1180px;
  --alto-nav: 68px;
  /* Logos de la barra: PersonaVirtual (la marca) manda; SKYN3T (el socio)
     va más pequeño, cada uno a su proporción natural. */
  --logo-nav-alto: 36px;
  --logo-socio-alto: 18px;
  /* Barra en móvil: logos y textos más pequeños para que todo quepa en una
     fila junto a los botones. */
  --logo-nav-alto-movil: 26px;
  --logo-socio-alto-movil: 12px;
  --texto-nav-movil: 0.6rem;
  /* Teléfono de la demo en móvil: cabe entero bajo las pestañas de puntos */
  --telefono-ancho-movil: 288px;
  /* Logo del crédito en el pie (SKYN3T). */
  --logo-pie-alto: 36px;
  /* Giro de moneda del logo del CTA de cierre: el del cierre del motion PersonaVirtual
     (src/scenes/cierre.js: COIN_TURNS 1,5 · COIN_DURATION 1,1 s ·
     COIN_PERSPECTIVE 900 px · escala 0,5 → 1 · power2.out). */
  --moneda-vueltas: -540deg;
  --moneda-duracion: 1.1s;
  --moneda-perspectiva: 900px;
  --moneda-escala-inicial: 0.5;
  --curva-moneda: cubic-bezier(0.215, 0.61, 0.355, 1);
  /* Logo en dos piezas (viewBox 2872 × 770 de PersonaVirtual_Logo_White.svg):
     el ícono de tarjetas ocupa x 90–420 y las letras empiezan en x 480; el
     corte va en x 450, dentro del hueco. Centros de cada pieza para su giro. */
  --logo-proporcion: 2872 / 770;
  --logo-corte: 15.67%; /* 450 / 2872 */
  --logo-centro-tarjetas: 8.88%; /* (90 + 420) / 2 / 2872 */
  --logo-holgura-neg: -40%;
  /* Tiempos del cierre del motion (src/scenes/cierre.js, desde el inicio de la
     escena): tarjetas a +0,35 s; letras a +beat(0,5) = 0,25 s durante 0,6 s
     (power3.inOut); destello a +beat(1,5) = 0,75 s, 0,15 s de subida + 0,4 s. */
  --cierre-tarjetas-inicio: 0.35s;
  --cierre-letras-inicio: 0.25s;
  --cierre-letras-duracion: 0.6s;
  --cierre-destello-inicio: 0.75s;
  --cierre-destello-duracion: 0.55s;
  --curva-letras: cubic-bezier(0.645, 0.045, 0.355, 1);
  /* Resplandores cian del motion (.end__icon, .end__wordmark img), a la escala
     del logo de la página. */
  --brillo-tarjetas: drop-shadow(0 5px 10px rgba(30, 255, 255, 0.25));
  --brillo-letras: drop-shadow(0 0 6px rgba(30, 255, 255, 0.35));
  --destello-letras: drop-shadow(0 0 14px rgba(30, 255, 255, 0.9));
  /* Marca de agua sobre las fotos de producto (logo negro). */
  --marca-agua-ancho: clamp(110px, 22%, 200px);
  --marca-agua-opacidad: 0.55;
  --gutter: clamp(16px, 4vw, 40px);

  /* Movimiento */
  --t-rapida: 160ms;
  --t-media: 320ms;
  --t-lenta: 700ms;
  --t-escena: 2s;
  /* Paso de las listas en cascada más ágiles (título del hero, KPIs). */
  --t-lista: 1.5s;
  /* Paso de las cascadas más pausadas (Mockups). */
  --t-pausada: 1.75s;
  --t-giro: 900ms;
  /* Profundidad del giro de la tarjeta del hero. */
  --giro-perspectiva: 1200px;
  /* Texto del reverso de esa tarjeta, relativo a su ancho (cqi). */
  --tarjeta-sitio-texto: 4.2cqi;
  --tarjeta-sitio-titulo: 5.6cqi;
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* Entrada y salida graduales, para apariciones suaves. */
  --curva-suave: cubic-bezier(0.45, 0, 0.25, 1);
}