/* HELIX — global accessibility helpers. Loaded on every page after fonts.css.
   Kept tiny and additive so it can't conflict with each page's inline styles. */

/* 1) Visible keyboard focus. Nav/links/buttons were only restyled on :hover,
      so keyboard focus was easy to lose. :focus-visible shows a ring for
      keyboard users without affecting mouse clicks. */
:focus-visible {
  outline: 2px solid #7c5cff;            /* HELIX violet */
  outline-offset: 2px;
  border-radius: 4px;
}

/* 2) Skip-to-content link — hidden until focused, first thing a keyboard user
      hits so they can jump past the ~20-item nav. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: #7c5cff;
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 10px 0;
  font: 600 14px/1.2 system-ui, -apple-system, sans-serif;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* 3) Screen-reader-only utility (visually hidden, still announced). */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 4) Reduced-motion safety net for the scroll-reveal / hero animations. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 5) CLS: content images carry intrinsic width/height now — keep them fluid
      without distortion (reserves space, prevents layout shift). */
/* (no height:auto — it would override intentional object-fit/cropped images
   like producto.html .cap-tall; the width/height attrs already give the
   aspect-ratio, and height stays auto by default for un-styled imgs.) */
img[width][height] { max-width: 100%; }

/* 6) Locale overflow guards — Spanish runs ~20–30% longer than English, which
      forced horizontal scroll and clipped strings. Fix the actual causes
      (decorative bleed, mobile nav, footer) + an overflow-x:clip safety net
      (clip, not hidden, so position:sticky headers keep working). */
html, body { overflow-x: clip; }
.mesh { overflow: hidden; }
.nav-right .btn { white-space: nowrap; }
@media (max-width: 860px) {
  /* the hamburger drawer already has Sign in + Request a demo, so the inline
     nav CTAs are redundant on mobile and just crowd the header. Generic
     `.nav-right .btn` covers every page's button classes (btn-ghost-light /
     btn-nav-demo on most pages, plain btn / btn-grad on 404). The lang-selector
     (not a .btn) stays. 860px matches 404's hamburger breakpoint. */
  .nav-right .btn { display: none; }
}
@media (max-width: 600px) {
  .footer-bottom { flex-wrap: wrap; row-gap: 10px; }
}

/* 7) Mobile text-fit for longer locales (ES) */
@media (max-width: 560px) { .hero-fine { white-space: normal; } }
.footer-col { min-width: 0; }            /* grid items default min-width:auto overflowed */
.footer-col a { overflow-wrap: anywhere; }