/*
  Sistema de accesibilidad a nivel de tokens/fundamentos.
  Los controles no tocan componentes individuales: activan atributos en
  <html> (data-a11y-*) que a su vez alimentan variables CSS globales
  (--a11y-*). Todo el sistema tipográfico del sitio ya está construido en
  rem (ver css/webflow.css, tokens --_sizes---fixed-- y --_typography---),
  así que escalar el font-size de <html> reflota el texto de forma natural
  en todo el sitio sin usar zoom del navegador ni transform:scale().

  Mapeo a WCAG 2.2 AA:
  - Tamaño de texto      -> 1.4.4 Resize Text
  - Interlineado/espaciado -> 1.4.8 Visual Presentation / 1.4.12 Text Spacing
  - Alto contraste       -> 1.4.3 Contrast (Minimum)
  - Resaltar enlaces     -> 1.4.1 Use of Color
  - Detener animaciones  -> 2.3.3 Animation from Interactions / 2.2.2 Pause, Stop, Hide
  - Foco de teclado      -> 2.4.7 Focus Visible / 2.4.11 Focus Not Obscured
*/

/* ===================== TOKENS ===================== */
:root {
  --a11y-font-scale: 1;
  --a11y-focus-color: #ffd763;
}

html {
  /* --root-size viene de css/scale.css (escalado fluido) */
  font-size: calc(var(--root-size, 16px) * var(--a11y-font-scale));
}

html[data-a11y-text-size="110"] { --a11y-font-scale: 1.1; }
html[data-a11y-text-size="120"] { --a11y-font-scale: 1.2; }
html[data-a11y-text-size="130"] { --a11y-font-scale: 1.3; }
html[data-a11y-text-size="140"] { --a11y-font-scale: 1.4; }

/* Interlineado y espaciado: se aplican a los contenedores de texto reales
   del sitio (párrafos, listas, texto de body) sin tocar componentes uno
   por uno, vía selectores de tipo/clase de texto ya usados en todo el sitio. */
html[data-a11y-line-height="relaxed"] :is(p, li, .text-color-secondary, .text-color-subtle, .text-color-on-primary, .h6, .h5, div[class*="text-"]) {
  line-height: 1.85 !important;
}

html[data-a11y-letter-spacing="relaxed"] :is(p, li, a, button, .text-color-secondary, .text-color-subtle, .text-color-on-primary, div[class*="text-"]) {
  letter-spacing: 0.06em !important;
  word-spacing: 0.12em !important;
}

/* Detener animaciones: además del control manual, respeta la preferencia
   del sistema operativo por defecto. */
html[data-a11y-motion="reduced"] *,
html[data-a11y-motion="reduced"] *::before,
html[data-a11y-motion="reduced"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

@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;
  }
}

/* Resaltar enlaces: subrayado fuerte + fondo, no depende solo del color. */
html[data-a11y-links="highlight"] a,
html[data-a11y-links="highlight"] .nav_links,
html[data-a11y-links="highlight"] .footer_link {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 0.1875rem !important;
  background-color: rgba(255, 215, 99, 0.35) !important;
  border-radius: 2px;
}

/* Foco de teclado reforzado: usa :focus-visible para no marcar en clics de mouse. */
html[data-a11y-focus="enhanced"] :focus-visible {
  outline: 0.1875rem solid var(--a11y-focus-color) !important;
  outline-offset: 0.1875rem !important;
  border-radius: 2px;
}

/* Alto contraste: pase pragmático a nivel de tokens de color del sitio.
   Fuerza texto negro sobre blanco como base, e invierte los bloques que
   normalmente llevan fondo oscuro (hero, footer, CTA) a negro/blanco puro.
   Es un punto de partida; conviene una revisión visual página por página
   antes de dar por cerrado el cumplimiento de contraste 7:1. */
/* 1) Base: fondo claro -> texto negro en todo el documento */
html[data-a11y-contrast="high"] body {
  background-color: #ffffff !important;
}

html[data-a11y-contrast="high"] body,
html[data-a11y-contrast="high"] body * {
  color: #000000 !important;
}

html[data-a11y-contrast="high"] a,
html[data-a11y-contrast="high"] .nav_links,
html[data-a11y-contrast="high"] .footer_link {
  text-decoration: underline !important;
}

/* 2) Secciones de marca con fondo oscuro (hero, footer, CTA, testimonios,
   header, botones, badges): fondo negro + texto blanco para TODO su
   contenido. Este bloque va después y con selector de clase (mayor
   especificidad que "body *"), así que gana sobre la regla base. */
html[data-a11y-contrast="high"] :is(
  .navbar_content,
  .section_hero,
  .hero_wrapper,
  .started_section,
  .section_wrapper,
  .section_footer,
  .testimonials_section,
  .button_secondary,
  .button_component,
  .services_arrow,
  .badge,
  .service_wrapper,
  .contact_wrapper,
  .blogs_wrapper,
  .about_wrapper,
  .service-one_wrapper,
  .services_clients,
  .member_content,
  .team_card-content
) {
  background-color: #000000 !important;
  border-color: #ffffff !important;
}

html[data-a11y-contrast="high"] :is(
  .navbar_content,
  .section_hero,
  .hero_wrapper,
  .started_section,
  .section_wrapper,
  .section_footer,
  .testimonials_section,
  .button_secondary,
  .button_component,
  .services_arrow,
  .badge,
  .service_wrapper,
  .contact_wrapper,
  .blogs_wrapper,
  .about_wrapper,
  .service-one_wrapper,
  .services_clients,
  .member_content,
  .team_card-content
) * {
  color: #ffffff !important;
}

/* 2b) Regla general: cualquier elemento con fondo oscuro (incluido el propio
   widget de accesibilidad en su estado activo) debe llevar texto blanco
   cuando Alto contraste está activo, sin importar si viene de una sección
   de marca o de un estado interactivo como .is-active. */
html[data-a11y-contrast="high"] .a11y-option.is-active,
html[data-a11y-contrast="high"] .a11y-option.is-active *,
html[data-a11y-contrast="high"] .a11y-button {
  color: #ffffff !important;
}

/* 3) Íconos/ilustraciones sobre fondo de color de marca (lila, etc.):
   se mantienen con fondo claro para que el ícono siga siendo visible. */
html[data-a11y-contrast="high"] :is(
  .nav_dropdown-illustration,
  .service_illustration,
  .hiring_img-illustration,
  .card_icon-wrapper
) {
  background-color: #ffffff !important;
}

html[data-a11y-contrast="high"] :is(
  .nav_dropdown-illustration,
  .service_illustration,
  .hiring_img-illustration,
  .card_icon-wrapper
) * {
  color: #000000 !important;
}

html[data-a11y-contrast="high"] img {
  filter: contrast(1.1);
}

/* ===================== WIDGET: botón + panel ===================== */
.a11y-button {
  position: fixed;
  left: 1.5rem;
  bottom: 1.5rem;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background-color: #01273d;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0.5rem 1.5rem rgba(1, 39, 61, 0.35);
  z-index: 1100;
  transition: transform 0.2s ease;
}

.a11y-button:hover {
  transform: scale(1.06);
}

.a11y-button svg {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
}

.a11y-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(1, 39, 61, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 1090;
}

.a11y-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.a11y-panel {
  position: fixed;
  left: 1.5rem;
  bottom: 5.5rem;
  width: min(90vw, 20rem);
  max-height: min(78vh, 35rem);
  overflow-y: auto;
  background-color: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 1.5rem 3rem rgba(1, 39, 61, 0.25);
  padding: 1.25rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 1100;
  font-family: "Stack Sans Headline", sans-serif;
}

.a11y-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.a11y-panel_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.a11y-panel_title {
  font-family: "Forum", serif;
  font-size: 1.625rem;
  letter-spacing: normal;
  color: #01273d;
}

.a11y-panel_close {
  background: none;
  border: none;
  cursor: pointer;
  color: #01273d;
  padding: 0.25rem;
  display: flex;
}

.a11y-group_label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 0.5rem;
}

.a11y-stepper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.a11y-stepper_btn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  border: 1px solid #e2e2e2;
  background-color: #f1f1f1;
  color: #01273d;
  font-weight: 700;
  cursor: pointer;
}

.a11y-stepper_btn:hover {
  background-color: #e2e2e2;
}

.a11y-stepper_value {
  flex: 1;
  text-align: center;
  font-size: 0.9rem;
  color: #01273d;
}

.a11y-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.a11y-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-radius: 0.6rem;
  border: 1px solid #e2e2e2;
  background-color: #ffffff;
  color: #01273d;
  font-size: 0.9rem;
  cursor: pointer;
}

.a11y-option_dot {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 2px solid #64748b;
  flex: none;
}

.a11y-option.is-active {
  background-color: #01273d;
  border-color: #01273d;
  color: #ffffff;
}

.a11y-option.is-active .a11y-option_dot {
  background-color: #ffd763;
  border-color: #ffd763;
}

.a11y-reset {
  width: 100%;
  padding: 0.65rem;
  border-radius: 0.6rem;
  border: 1px solid #01273d;
  background-color: #ffffff;
  color: #01273d;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 0.75rem;
}

.a11y-reset:hover {
  background-color: #f1f1f1;
}

.a11y-footnote {
  font-size: 0.72rem;
  color: #64748b;
  text-align: center;
}

/* Badge "Made in Webflow" (inyectado por el runtime de Webflow, no vive en el
   HTML). Se oculta en todas las páginas; este archivo ya se carga en las 12. */
.w-webflow-badge {
  display: none !important;
}

@media screen and (max-width: 479px) {
  .a11y-button {
    left: 1rem;
    bottom: 1rem;
    width: 2.85rem;
    height: 2.85rem;
  }
  .a11y-panel {
    left: 1rem;
    bottom: 4.75rem;
  }
}