body {
  background: var(--mtc-color-bg);
  color: var(--mtc-color-text);

  font-family: var(--mtc-font-family);
  font-size: var(--mtc-font-size-md);
  line-height: 1.5;
  overflow-x: hidden !important; 
}

.mtc-container {
  width: 100%;
  max-width: var(--mtc-container-width);
  margin-inline: auto;
  padding-inline: var(--mtc-space-lg);
}

.mtc-section {
  padding-block: var(--mtc-space-3xl);
}

.mtc-title {
  font-size: var(--mtc-font-size-2xl);
  font-weight: var(--mtc-font-weight-bold);
}

.mtc-text-soft {
  color: var(--mtc-color-text-soft);
}

/* ==========================================================================
   Minimal Scrollbars
   ========================================================================== */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--mtc-color-border-strong) transparent;
}

/* Chrome, Edge, Safari */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--mtc-color-border-strong);
  border-radius: var(--mtc-radius-pill);
  border: 3px solid transparent;
  background-clip: content-box;
  transition: background-color var(--mtc-transition-fast);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--mtc-color-text-muted);
}

*::-webkit-scrollbar-thumb:active {
  background-color: var(--mtc-color-primary);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Scrollbars para contenedores con fondo de superficie */
.mtc-scrollbar,
.mtc-panel,
.mtc-popup,
.mtc-offcanvas {
  scrollbar-width: thin;
  scrollbar-color: var(--mtc-color-border-strong) transparent;
}

.mtc-scrollbar::-webkit-scrollbar,
.mtc-panel::-webkit-scrollbar,
.mtc-popup::-webkit-scrollbar,
.mtc-offcanvas::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.mtc-scrollbar::-webkit-scrollbar-track,
.mtc-panel::-webkit-scrollbar-track,
.mtc-popup::-webkit-scrollbar-track,
.mtc-offcanvas::-webkit-scrollbar-track {
  background: transparent;
}

.mtc-scrollbar::-webkit-scrollbar-thumb,
.mtc-panel::-webkit-scrollbar-thumb,
.mtc-popup::-webkit-scrollbar-thumb,
.mtc-offcanvas::-webkit-scrollbar-thumb {
  background-color: var(--mtc-color-border-strong);
  border-radius: var(--mtc-radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}

.mtc-scrollbar::-webkit-scrollbar-thumb:hover,
.mtc-panel::-webkit-scrollbar-thumb:hover,
.mtc-popup::-webkit-scrollbar-thumb:hover,
.mtc-offcanvas::-webkit-scrollbar-thumb:hover {
  background-color: var(--mtc-color-primary);
}

/* Variante más sutil */
.mtc-scrollbar-soft {
  scrollbar-width: thin;
  scrollbar-color: var(--mtc-color-border-subtle) transparent;
}

.mtc-scrollbar-soft::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.mtc-scrollbar-soft::-webkit-scrollbar-track {
  background: transparent;
}

.mtc-scrollbar-soft::-webkit-scrollbar-thumb {
  background-color: var(--mtc-color-border-subtle);
  border-radius: var(--mtc-radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}

.mtc-scrollbar-soft::-webkit-scrollbar-thumb:hover {
  background-color: var(--mtc-color-border-strong);
}