.a11y-skip-link {
  position: fixed;
  z-index: 10000;
  top: 0.65rem;
  left: 0.65rem;
  border: 3px solid var(--vq-gold, #f5c842);
  border-radius: 0.7rem;
  padding: 0.65rem 0.9rem;
  color: #fff;
  background: #111116;
  font-weight: 900;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform 140ms ease;
}

.a11y-skip-link:focus,
.a11y-skip-link:focus-visible {
  color: #fff;
  outline: 0;
  transform: translateY(0);
}

.a11y-fab {
  position: fixed;
  z-index: 220;
  top: 0.82rem;
  right: max(1rem, env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.65rem;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.a11y-fab__btn {
  order: 0;
  display: grid;
  width: 3.05rem;
  height: 3.05rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0.9rem;
  color: #17130a;
  background: var(--vq-gold, #f5c842);
  box-shadow: 0 0.14rem 0 #8f741e, 0 0.6rem 1.5rem rgba(0, 0, 0, 0.28);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 950;
  letter-spacing: -0.05em;
  transition: background 140ms ease, transform 140ms ease;
}

.a11y-fab__btn:hover {
  background: var(--vq-gold-soft, #ffe68f);
  transform: translateY(-1px);
}

.a11y-fab__btn[aria-expanded="true"] {
  /* El mismo morado que los botones pulsados del panel: blanco sobre #6544d8
     da 6.2:1; sobre --vq-purple-strong (#7c5cfc) se quedaba en 4.4:1. */
  color: #fff;
  background: #6544d8;
  box-shadow: 0 0.14rem 0 #49339f, 0 0.6rem 1.5rem rgba(0, 0, 0, 0.3);
}

.a11y-panel {
  order: 1;
  width: min(22rem, calc(100vw - 2rem));
  max-height: calc(100svh - 5.2rem);
  overflow: auto;
  border: 1px solid #d4d1dc;
  border-radius: 1.05rem;
  padding: 1rem;
  color: #17151c;
  background: #fff;
  box-shadow: 0 1.2rem 4rem rgba(0, 0, 0, 0.44);
}

.a11y-panel__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.a11y-panel__head strong,
.a11y-panel__head span {
  display: block;
}

.a11y-panel__head strong {
  font-size: 1rem;
}

.a11y-panel__head span {
  margin-top: 0.12rem;
  color: #575261;
  font-size: 0.76rem;
}

.a11y-panel__close {
  display: grid;
  flex: 0 0 auto;
  width: 2.45rem;
  height: 2.45rem;
  place-items: center;
  border: 1px solid #c9c5d0;
  border-radius: 0.7rem;
  color: #17151c;
  background: #f3f1f6;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}

.a11y-panel__group {
  margin: 0;
  border: 0;
  border-top: 1px solid #dfdce5;
  padding: 0.8rem 0 0;
}

.a11y-panel__group + .a11y-panel__group {
  margin-top: 0.8rem;
}

.a11y-panel__group legend {
  padding: 0 0.35rem 0 0;
  color: #4f4958;
  font-size: 0.73rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.a11y-panel__btns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
  margin-top: 0.45rem;
}

.a11y-panel__btns button,
.a11y-panel__reset {
  min-height: 2.7rem;
  border: 1px solid #c7c2cf;
  border-radius: 0.7rem;
  color: #17151c;
  background: #f5f3f7;
  cursor: pointer;
  font-weight: 850;
}

.a11y-panel__btns button[aria-pressed="true"] {
  border-color: #6544d8;
  color: #fff;
  background: #6544d8;
}

.a11y-toggle {
  display: flex;
  min-height: 2.65rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: #2a2630;
  cursor: pointer;
  font-size: 0.87rem;
  font-weight: 700;
}

.a11y-toggle input {
  flex: 0 0 auto;
  width: 1.3rem;
  height: 1.3rem;
  accent-color: #6544d8;
}

.a11y-panel__reset {
  width: 100%;
  margin-top: 0.85rem;
}

.a11y-panel button:hover {
  border-color: #6544d8;
}

.a11y-panel button:focus-visible,
.a11y-panel input:focus-visible,
.a11y-fab__btn:focus-visible {
  outline: 3px solid #0a759c;
  outline-offset: 2px;
}

html.a11y-light-theme {
  color-scheme: light;
  --vq-bg: #f7f6fa;
  --vq-surface: #fff;
  --vq-surface-strong: #f3f1f6;
  --vq-surface-raised: #e7e4eb;
  --vq-text: #17151c;
  --vq-muted: #4d4858;
  --vq-faint: #6c6676;
  --vq-line: rgba(23, 21, 28, 0.13);
  --vq-line-strong: rgba(23, 21, 28, 0.27);
  --vq-purple: #5f42d4;
  --vq-purple-strong: #5637c3;
  --vq-gold: #806000;
  --vq-gold-soft: #674c00;
  --vq-green: #087342;
  --vq-shadow: 0 2rem 5rem rgba(43, 38, 51, 0.14);
}

html.a11y-light-theme body {
  background:
    radial-gradient(circle at 74% 5%, rgba(95, 66, 212, 0.1), transparent 32rem),
    radial-gradient(circle at 18% 28%, rgba(128, 96, 0, 0.06), transparent 24rem),
    var(--vq-bg);
}

html.a11y-light-theme .site-header {
  background: rgba(247, 246, 250, 0.9);
}

html.a11y-light-theme .button {
  color: #fff;
  background: #5637c3;
  box-shadow: 0 0.2rem 0 #342078;
}

html.a11y-light-theme .button:hover {
  color: #fff;
  background: #4529aa;
}

html.a11y-light-theme .site-nav__links a.button,
html.a11y-light-theme .site-nav__links a.button:hover {
  color: #fff;
}

/* En tema claro --vq-gold es #806000 (oscuro), y el texto #17130a del FAB se
   quedaba en 3.2:1. En blanco da 5.9:1 en reposo y 8:1 sobre --vq-gold-soft. */
html.a11y-light-theme .a11y-fab__btn,
html.a11y-light-theme .a11y-fab__btn:hover {
  color: #fff;
  border-color: rgba(23, 21, 28, 0.18);
}

html.a11y-light-theme .button--secondary {
  color: var(--vq-text);
  border-color: var(--vq-line-strong);
  background: var(--vq-surface);
  box-shadow: none;
}

html.a11y-light-theme .phone-card {
  --vq-text: #f4f2f8;
  --vq-muted: #c7c2ce;
  --vq-faint: #aaa4b2;
  --vq-line: rgba(244, 242, 248, 0.14);
  --vq-line-strong: rgba(244, 242, 248, 0.26);
  --vq-purple: #ab98ff;
  --vq-gold: #f5c842;
  --vq-green: #77ecaa;
  color: var(--vq-text);
}

html.a11y-light-theme .site-footer {
  color: #f4f2f8;
  background: #111116;
}

html.a11y-light-theme .site-footer .brand,
html.a11y-light-theme .site-footer .footer-links a {
  color: #f4f2f8;
}

html.a11y-light-theme .site-footer p,
html.a11y-light-theme .site-footer .footer-copy {
  color: #aaa4b2;
}

html.a11y-high-contrast {
  color-scheme: dark;
  --vq-bg: #000;
  --vq-surface: #080808;
  --vq-surface-strong: #111;
  --vq-surface-raised: #1b1b1b;
  --vq-text: #fff;
  --vq-muted: #fff;
  --vq-faint: #ececec;
  --vq-line: rgba(255, 255, 255, 0.58);
  --vq-line-strong: #fff;
  --vq-purple: #d7d0ff;
  --vq-purple-strong: #b9acff;
  --vq-gold: #ffdf45;
  --vq-gold-soft: #fff0a2;
  --vq-green: #72ffaf;
}

html.a11y-high-contrast body {
  background: #000 !important;
}

html.a11y-high-contrast .site-header {
  background: #000;
}

html.a11y-high-contrast .button,
html.a11y-high-contrast .store-badge,
html.a11y-high-contrast .feature-card,
html.a11y-high-contrast .step-card,
html.a11y-high-contrast .principle-card,
html.a11y-high-contrast .progress-card,
html.a11y-high-contrast .availability-box {
  border-color: #fff;
}

/* El badge de tienda lleva colores propios (no los tokens del tema); en alto
   contraste se llevan a blanco puro sobre negro. */
html.a11y-high-contrast .store-badge {
  --badge-bg: #000;
  --badge-line: #fff;
  --badge-text: #fff;
  --badge-faint: #fff;
}

/* Blanco sobre el morado claro de alto contraste (#b9acff) daba 2:1; en negro
   son 10.4:1. */
html.a11y-high-contrast .a11y-fab__btn[aria-expanded="true"] {
  color: #000;
  background: var(--vq-purple-strong);
  box-shadow: 0 0.14rem 0 #fff, 0 0.6rem 1.5rem rgba(0, 0, 0, 0.3);
}

html.a11y-underline-links a {
  text-decoration: underline !important;
}

html.a11y-readable-font,
html.a11y-readable-font body,
html.a11y-readable-font button,
html.a11y-readable-font input,
html.a11y-readable-font select,
html.a11y-readable-font textarea {
  font-family: Arial, Verdana, Tahoma, sans-serif !important;
  letter-spacing: 0.02em;
  word-spacing: 0.05em;
}

html.a11y-readable-font p,
html.a11y-readable-font li {
  line-height: 1.75;
}

html.a11y-readable-font h1,
html.a11y-readable-font h2,
html.a11y-readable-font h3 {
  letter-spacing: 0 !important;
}

html.a11y-enhanced-focus :focus-visible {
  outline: 4px solid var(--vq-gold, #f5c842) !important;
  outline-offset: 4px !important;
}

html.a11y-calm-view body {
  background: var(--vq-bg) !important;
}

html.a11y-calm-view body::before,
html.a11y-calm-view .product-preview__glow {
  display: none !important;
}

html.a11y-calm-view .phone-card,
html.a11y-calm-view .principle-card,
html.a11y-calm-view .availability-box {
  background-image: none !important;
}

/* Unico bloque de movimiento reducido. La clase la ponen a11y-boot.js y
   a11y-widget.js tanto por el interruptor del panel como por
   prefers-reduced-motion, asi que no hace falta repetir estas reglas dentro
   de una media query. */
html.a11y-reduce-motion {
  scroll-behavior: auto;
}

html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.01ms !important;
}

/* Red de seguridad sin JavaScript para el unico movimiento que importa de
   verdad (el desplazamiento suave de las anclas). */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

#main-content {
  scroll-margin-top: calc(var(--vq-header, 4.75rem) + 1rem);
}

@media (max-width: 48rem) {
  .a11y-fab {
    top: 0.62rem;
    right: max(0.65rem, env(safe-area-inset-right));
  }

  .a11y-fab__btn {
    width: 2.95rem;
    height: 2.95rem;
  }

  .a11y-panel {
    width: calc(100vw - 1.3rem);
    max-height: calc(100svh - 4.6rem);
  }
}