/**
 * Tokens de marca Varnolac + a11y + motion base.
 * Fuente de verdad: rojo #c81c24 · azul logo #07008a · tinta #26252d · DM Sans.
 */
:root {
  --vl-ink: #26252d;
  --vl-accent: #c81c24;
  --vl-accent-hover: #a6171e;
  --vl-navy: #07008a;
  --vl-bg: #f6f7f8;
  --vl-card: #ffffff;
  --vl-border: #d8dce0;
  --vl-muted: #6b7580;
  --vl-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --vl-dur: 0.22s;
  --vl-dur-reveal: 0.45s;
}

/* Focus visible global (teclado) */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--vl-accent);
  outline-offset: 2px;
}

/* Reveal genérico (PHP hubs / páginas) */
[data-vl-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--vl-dur-reveal) var(--vl-ease),
    transform var(--vl-dur-reveal) var(--vl-ease);
}

[data-vl-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  [data-vl-reveal],
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}