/* ─── Layout ──────────────────────────────────────────────────── */
.container, .conteiner {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1280px;
}

/* ─── Scrollbar ───────────────────────────────────────────────── */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }

/* ─── Focus Visible ────────────────────────────────────────────── */
*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ─── Smooth Scroll ────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ─── Gradient Animation ───────────────────────────────────────── */
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  25%  { background-position: 100% 0%; }
  50%  { background-position: 100% 100%; }
  75%  { background-position: 0% 100%; }
  100% { background-position: 0% 50%; }
}
.animate-gradient {
  background-size: 300% 300%;
  animation: gradient-shift 14s linear infinite;
}

/* ─── Reduced Motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Shimmer ──────────────────────────────────────────────────── */
@keyframes shimmer {
  0%   { transform: translateX(-100%) skewX(-12deg); }
  100% { transform: translateX(200%) skewX(-12deg); }
}

/* ─── Alpine ───────────────────────────────────────────────────── */
[x-cloak] { display: none !important; }

/* ─── SofIA Drawer ──────────────────────────────────────────────── */
.solia-drawer { width: 100vw; }
@media (min-width: 640px) { .solia-drawer { width: 400px; } }