/* Josh Beats · tokens de la dirección «Firma» que no son del cliente: tipos, espacio, forma, movimiento y capas
 * (diseno/variantes/firma/tokens.css). Los colores, sus tonos derivados y las letras salen de sitio.config.mjs
 * en marca.css (`npm run marca`). Cada tiempo cita su sección de referencia-visual/medidas.md. */
:root {
  /* ── Tamaños de letra ── */
  --t-titulo: clamp(44px, 4.9vw, 72px);       /* §2: 70/75 escritorio, 40–44 celular */
  --t-titulo-alto: 1.07;
  --t-titulo-2: clamp(30px, 2.8vw, 42px);     /* §2: 40/45 escritorio, 30/35 celular */
  --t-titulo-3: clamp(22px, 1.9vw, 28px);
  --t-titulo-cuenta: clamp(56px, 6.6vw, 104px); /* el título grande de entrar, la cuenta y Reservar (etapas 4 a 6; en el celular, --t-titulo) */
  --t-esquina: clamp(14px, 1.15vw, 17px);     /* esquinas, menú, «Escuchar» (versales espaciadas) */
  --t-texto: 16px;                            /* §2: 15–16 px con interlineado 1,8 */
  --t-texto-alto: 1.8;
  --t-mini: 11px;        /* escala de 7 tamaños fijos: 11 · 12 · 14 · 15 · 16 · 19 · 22 (más los títulos con clamp) */
  --t-etiqueta: 12px;
  --t-dato: 14px;
  --t-chico: 15px;
  --t-bajada: 19px;
  --t-lista: 22px;
  --t-fecha: clamp(64px, 7.6vw, 112px);
  --t-campo: 16px;       /* lo que se escribe en un campo: nunca menos de 16 px (el iPhone no se acerca al enfocarlo) */
  /* Nombre grande (§6.5: 77,5 % del ancho en escritorio, ≈ 90 % en celular). El JS lo mide y lo afina; este valor
     de partida es el medido para «Josh Beats» en Bodoni Moda (176 px a 1440 y 53 px a 375), así no salta al cargar. */
  --nombre-tam-escritorio: 12.22vw;
  --nombre-tam-celular: 14.13vw;
  --peso-titulo: 430;
  --peso-nombre: 460;
  --peso-nombre-golpe: 660;                   /* el nombre engorda con cada golpe fuerte de «Escuchar» */
  --espaciado-versales: 0.08em;
  --espaciado-etiqueta: 0.18em;

  /* ── Espacio (escala de 4) ── */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; --e-10: 128px; --e-11: 160px;
  --margen: 50px;            /* §3: márgenes laterales de unos 50 px en escritorio (la medida del referente) */
  --e-cabeza: 128px;         /* alto de la cabeza (firma y botón «Menú») sobre el contenido del menú */
  --margen-celular: 20px;    /* §3 y ficha §4: 20 px del borde en celular */
  --boton-caja: 100px;       /* §3: caja de 100 px con dos anillos de 80 px */
  --boton-anillo: 80px;
  /* Columna del botón «Menú» fijo en escritorio: el anillo empieza a 130 px del borde derecho; el texto de las secciones
     bajo la portada termina a margen + 120 = 170 px (40 px de aire), como el referente, que nunca pone texto bajo su botón. */
  --libre-menu: 120px;
  --toque: 44px;

  /* Ajuste 1 de Ani (etapa 1): el video 22 (de celular, 720 px) se veía blando; una curva de contraste le da negros
     hondos y luces limpias, como el retrato de al lado. Medido: no baja el contraste del nombre, el lema ni la firma. */
  --filtro-video: grayscale(1) contrast(1.38) brightness(0.84);

  /* ── Forma ── */
  --hilo: 1px;
  --sombra-lamina: 0 24px 64px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4); /* Firma: cada hoja de la lámina sobre el fondo */

  /* ── Movimiento (cada uno con su fuente en medidas.md) ── */
  --curva-ease-out: cubic-bezier(0, 0, 0.58, 1);     /* §5: «ease-out» de CSS (menú, enlaces, subrayados, líneas) */
  --curva-ease: cubic-bezier(0.25, 0.1, 0.25, 1);    /* §5: «ease» (cursor, saltos del grano) */
  --mov-grano: 200ms;                 /* §5 grano: 0,2 s por ciclo, 10 posiciones */
  --mov-cursor: 200ms;                /* §5 cursor: encoger o crecer 0,2 s ease */
  --mov-anillo-forma: 5s;             /* §5 botón redondo: forma 5 s (0 → 30 → 66 → 100 %) ease-out por tramo */
  --mov-anillo-giro-1: 6s;            /* §5 botón redondo: anillo 1, una vuelta en 6 s, lineal */
  --mov-anillo-giro-2: 5s;            /* §5 botón redondo: anillo 2, una vuelta en 5 s, lineal */
  --mov-enlace: 500ms;                /* §5 enlaces y botones: color 0,5 s ease-out; anillo al pasar 0,5 s */
  --mov-subrayado: 300ms;             /* §5 subrayado de idiomas: 0,3 s ease-out */
  --mov-pieza: 300ms;                 /* §5 pieza del menú al pasar: 0,3 s ease-out (copia 7 px, nombre 5 px) */
  --mov-titulo-tarjeta: 500ms;        /* §5 título de proyecto al pasar: 0,5 s ease-out, 5 px */
  --mov-linea: 2000ms;                /* §5 líneas separadoras: 2 s ease-out, una vez */
  --mov-menu: 1000ms;                 /* §5 abrir/cerrar el menú: capa y piezas 1 s ease-out, a la vez */
  --mov-menu-desde: 1.2;              /* §5 la capa entra desde el 120 % del ancho (140 % hasta 768 px) */
  --mov-menu-desde-celular: 1.4;
  --mov-menu-vuelo: 100px;            /* §5 cada pieza vuela desde 100 px arriba y a la izquierda de la capa */
  --mov-bloques-persecucion: 300ms;   /* §6.1 revelado: persecución de 0,3 s, salida exponencial */
  --mov-paralaje: 200;                /* §5 desfase del bloque = 100 − 200 · p px */
  --mov-onda: 1.5;                    /* §5 «Escuchar»: ≈ 1,5 ondas por segundo (un cuarto de vuelta × 0,1 por cuadro a 60 cuadros) */
  --mov-golpe-ataque: 40ms;           /* propio (Firma): el nombre sube con el golpe (sin temblar) */
  --mov-golpe-caida: 220ms;           /* propio (Firma): y vuelve */
  --mov-latido: 2400ms;               /* propio (Firma): el punto «en vivo» del próximo concierto late despacio */
  --mov-video: 400ms;                 /* propio: el video aparece sobre su póster cuando ya corre (PRINCIPIOS: entrada) */
  --mov-giro-envio: 900ms;            /* propio de Firma (ficha §4 Contratar): el anillo que gira mientras carga una grabación o se envía */
  --mov-estado: 180ms;                /* PRINCIPIOS: respuesta de un control (foco, elegido) */
  --mov-reducido: 200ms;              /* PRINCIPIOS: con «reducir movimiento», solo fundidos de 200 ms como mucho */
  --mov-aviso: 3600ms;                /* propio de Firma (su aviso, app.js): lo que dura a la vista «Enlace copiado» de «Compartir» (falta en medidas.md) */

  /* ── Lámina de cambio de página (§6.1 y §6.2; los mismos de los tokens de Firma) ── */
  --curva-lamina: cubic-bezier(0.625, 0.05, 0, 1);   /* §6.1: curva propia del referente 2, en todo el cambio */
  --mov-lamina-encoger: 600ms;        /* §6.1 la que sale: escala y opacidad 1 → 0,8 en 0,6 s, desde 0 */
  --mov-lamina-salir: 800ms;          /* §6.1 la que sale gira −5° y se va −50 % en 0,8 s; la que entra, 0,8 s */
  --mov-lamina-retardo: 100ms;        /* §6.1 girar, salir y entrar empiezan a los 0,1 s */
  --mov-lamina-retiro: 900ms;         /* §6.1 la que sale se retira a los 0,9 s */
  --mov-lamina-espera: 500ms;         /* §6.1 cursor en espera y nada se pulsa de 0 a ≈ 0,5 s */
  --mov-lamina-escala-sale: 0.8;      /* §6.1 la que sale: escala 1 → 0,8 */
  --mov-lamina-opacidad-sale: 0.8;    /* §6.1 la que sale: opacidad 1 → 0,8 */
  --mov-lamina-giro: 5deg;            /* §6.1 la que sale gira 0 → −5°; la que entra, +5° → 0 */
  --mov-lamina-desplazamiento: 50%;   /* §6.1 la que sale se va −50 % de su ancho (la que entra viene de +100 %) */
  --mov-lamina-escala-entra: 0.85;    /* §6.1 la que entra: escala 0,85 → 1 */
  --mov-palabras: 700ms;              /* §6.1 palabras del título 0,7 s */
  --mov-palabras-desde: 500ms;        /* §6.1 desde 0,5 s */
  --mov-palabras-paso: 30ms;          /* §6.1 0,03 s entre palabras */
  --mov-palabras-caida: 140%;         /* §6.1 de 140 % de su alto por debajo */
  --mov-palabras-giro: 5deg;          /* §6.1 y 5° de giro */
  --mov-lineas: 700ms;                /* §6.1 líneas 0,7 s */
  --mov-lineas-desde: 650ms;          /* §6.1 desde 0,65 s */
  --mov-lineas-paso: 40ms;            /* §6.1 0,04 s entre líneas */
  --mov-lineas-caida: 100%;           /* §6.1 de 100 % por debajo y opacidad 0 */
  --mov-bloque-marcado: 600ms;        /* §6.1 bloques marcados 0,6 s */
  --mov-bloque-marcado-desde: 700ms;  /* §6.1 desde 0,7 s */
  --mov-bloque-marcado-paso: 30ms;    /* §6.1 0,03 s entre ellos */
  --mov-bloque-marcado-caida: 32px;   /* propio de Firma (§6.1 no da la distancia) */
  --mov-fotos: 400ms;                 /* §6.1 fotos 0,4 s (opacidad 0 → 1) */
  --mov-fotos-desde: 900ms;           /* §6.1 desde 0,9 s */
  --mov-lamina-inercia: 150ms;        /* propio (PRINCIPIOS): tras el cambio, la rueda que siga llegando con menos de 0,15 s entre golpes es inercia y no pasa */

  /* ── Visor de fotos de Escuchar (§5 «Foto ampliada»: se abre al instante, sin duración) ── */
  --gesto-distancia: 56px;            /* propio (PRINCIPIOS «gestos»): deslizar pasa de foto con 56 px… */
  --gesto-distancia-minima: 16px;     /* …o con al menos 16 px… */
  --gesto-velocidad: 0.3;             /* …a 0,3 px/ms o más; si no, la foto vuelve (--mov-estado) */

  /* ── Capas ── */
  --z-pagina: 1; --z-lamina-sale: 2; --z-lamina-entra: 3; --z-cabecera: 20; --z-menu: 30; --z-visor: 35; --z-bloqueo: 40; --z-grano: 50; --z-cursor: 60;
}