/* MARKTSPOT Design System (dist/marktspot.css) adaptado para WordPress + Elementor.
   Generado automáticamente: se quitó la carga de Google Fonts (las fuentes vienen en el plugin)
   y a cada selector se le antepuso body.ms-base:not(#ms-x) para que gane a los estilos
   globales del kit de Elementor. No lo edites a mano: si cambia el Design System, vuelve a generarlo. */
:root, [data-theme="light"] {
--laguna-50: #E8F6F6;
  --laguna-100: #CDEDED;
  --laguna-200: #9EDDDD;
  --laguna-300: #61CCCD;
  --laguna-400: #2FAFB0;
  --laguna-500: #128888;
  --laguna-600: #0F7476;
  --laguna-700: #0C5D60;
  --laguna-800: #0A474B;
  --laguna-900: #083337;
  --tinta-950: #08161C;
  --tinta-900: #0C1F27;
  --tinta-800: #13303A;
  --marino-700: #123C57;
  --white: #FFFFFF;
  --niebla-25: #F7FAFA;
  --niebla-50: #EEF3F4;
  --niebla-100: #E3ECED;
  --niebla-200: #DCE5E7;
  --niebla-400: #7F9296;
  --niebla-500: #5E7176;
  --niebla-600: #4A5C61;
  --niebla-900: #13232A;
  --senal-300: #F6A585;
  --senal-500: #EE6940;
  --senal-700: #B8431D;
  --senal-800: #9A3816;
  --cielo-300: #7CC0DE;
  --cielo-500: #1C83AE;
  --cielo-700: #135E80;
  --ciruela-500: #6D3B89;
  --bg: var(--niebla-25);
  --surface: var(--white);
  --surface-sunken: var(--niebla-50);
  --surface-tint: var(--laguna-50);
  --surface-deep: var(--tinta-900);
  --surface-deep-raised: var(--tinta-800);
  --line: var(--niebla-200);
  --border: var(--niebla-400);
  --line-on-deep: rgba(240, 245, 245, 0.14);
  --border-on-deep: rgba(240, 245, 245, 0.42);
  --text: var(--niebla-900);
  --text-muted: var(--niebla-600);
  --text-subtle: var(--niebla-500);
  --text-on-deep: #F0F5F5;
  --text-on-deep-muted: #A9BEC2;
  --primary: var(--laguna-700);
  --primary-hover: var(--laguna-600);
  --on-primary: var(--white);
  --primary-soft: var(--laguna-100);
  --accent-on-deep: var(--laguna-300);
  --on-accent: var(--tinta-950);
  --spot: var(--senal-500);
  --spot-text: var(--senal-700);
  --spot-soft: #FCE3D9;
  --spot-fill: var(--senal-700);
  --on-spot-fill: var(--white);
  --cta: var(--senal-700);
  --cta-hover: var(--senal-800);
  --on-cta: var(--white);
  --focus: var(--cielo-500);
  --focus-soft: rgba(28, 131, 174, 0.22);
  --nav-bg: rgba(247, 250, 250, 0.86);
  --success: #1D7A50;
  --warning: #8F5B0E;
  --danger: #C0392B;
  --info: var(--cielo-700);
  --data-1: var(--laguna-500);
  --data-2: var(--marino-700);
  --data-3: var(--senal-500);
  --data-4: var(--cielo-500);
  --data-5: var(--ciruela-500);
  --data-6: var(--laguna-300);
  --hex-1: var(--laguna-50);
  --hex-2: var(--laguna-100);
  --hex-3: var(--laguna-200);
  --hex-4: var(--laguna-300);
  --hex-5: var(--laguna-500);
  --hex-6: var(--laguna-700);
  --hex-stroke: var(--bg);
  --shadow-sm: 0 1px 2px rgba(12, 31, 39, 0.06), 0 1px 1px rgba(12, 31, 39, 0.04);
  --shadow-md: 0 12px 28px -12px rgba(12, 31, 39, 0.22);
  --shadow-lg: 0 24px 60px -24px rgba(12, 31, 39, 0.35);
}
[data-theme="dark"] {
--bg: var(--tinta-950);
  --surface: #0C1F27;
  --surface-sunken: #061116;
  --surface-tint: #0F2A30;
  --surface-deep: #102A33;
  --surface-deep-raised: #173743;
  --line: #1E3A44;
  --border: #56707A;
  --text: #E8F0F1;
  --text-muted: #A7B8BB;
  --text-subtle: #8FA3A7;
  --primary: var(--laguna-300);
  --primary-hover: var(--laguna-200);
  --on-primary: var(--tinta-950);
  --primary-soft: #123A3E;
  --spot: #F07A55;
  --spot-text: var(--senal-300);
  --spot-soft: #3A2219;
  --cta: var(--senal-500);
  --cta-hover: var(--senal-300);
  --on-cta: var(--tinta-950);
  --focus: var(--cielo-300);
  --focus-soft: rgba(124, 192, 222, 0.28);
  --nav-bg: rgba(8, 22, 28, 0.86);
  --success: #5CC79A;
  --warning: #E9B65C;
  --danger: #F08A7E;
  --info: var(--cielo-300);
  --data-1: #2FAFB0;
  --data-2: #7CA6C9;
  --data-3: #F07A55;
  --data-4: #5BB0D8;
  --data-5: #B48BCB;
  --data-6: #9EDDDD;
  --hex-1: #0F2A30;
  --hex-2: #0E3B3E;
  --hex-3: var(--laguna-700);
  --hex-4: var(--laguna-500);
  --hex-5: var(--laguna-400);
  --hex-6: var(--laguna-300);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 28px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: var(--tinta-950);
    --surface: #0C1F27;
    --surface-sunken: #061116;
    --surface-tint: #0F2A30;
    --surface-deep: #102A33;
    --surface-deep-raised: #173743;
    --line: #1E3A44;
    --border: #56707A;
    --text: #E8F0F1;
    --text-muted: #A7B8BB;
    --text-subtle: #8FA3A7;
    --primary: var(--laguna-300);
    --primary-hover: var(--laguna-200);
    --on-primary: var(--tinta-950);
    --primary-soft: #123A3E;
    --spot: #F07A55;
    --spot-text: var(--senal-300);
    --spot-soft: #3A2219;
    --cta: var(--senal-500);
    --cta-hover: var(--senal-300);
    --on-cta: var(--tinta-950);
    --focus: var(--cielo-300);
    --focus-soft: rgba(124, 192, 222, 0.28);
    --nav-bg: rgba(8, 22, 28, 0.86);
    --success: #5CC79A;
    --warning: #E9B65C;
    --danger: #F08A7E;
    --info: var(--cielo-300);
    --data-1: #2FAFB0;
    --data-2: #7CA6C9;
    --data-3: #F07A55;
    --data-4: #5BB0D8;
    --data-5: #B48BCB;
    --data-6: #9EDDDD;
    --hex-1: #0F2A30;
    --hex-2: #0E3B3E;
    --hex-3: var(--laguna-700);
    --hex-4: var(--laguna-500);
    --hex-5: var(--laguna-400);
    --hex-6: var(--laguna-300);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 12px 28px -12px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
}
}
:root {
--space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --duration-fast: 140ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;
  --duration-slower: 640ms;
  --duration-count: 1200ms;
  --ease-arrive: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --container: 1200px;
  --container-narrow: 760px;
  --container-wide: 1360px;
  --font-sans: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --font-label: "Commissioner", "Geist", "Segoe UI", system-ui, sans-serif;
}
body.ms-base:not(#ms-x), body.ms-base:not(#ms-x) {
margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.ms-base:not(#ms-x) *, body.ms-base:not(#ms-x) *::before, body.ms-base:not(#ms-x) *::after {
box-sizing: border-box;
}
body.ms-base:not(#ms-x) img, body.ms-base:not(#ms-x) svg {
max-width: 100%;
}
body.ms-base:not(#ms-x) :focus-visible {
outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-xs);
}
body.ms-base:not(#ms-x) ::selection {
background: var(--primary-soft); color: var(--text);
}
body.ms-base:not(#ms-x) .ms-container {
width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-left: max(var(--space-4), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space-4), env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) {
body.ms-base:not(#ms-x) .ms-container {
padding-left: max(var(--space-6), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-6), env(safe-area-inset-right, 0px));
}
}
body.ms-base:not(#ms-x) .ms-container--narrow {
max-width: var(--container-narrow);
}
body.ms-base:not(#ms-x) .ms-section {
padding-block: clamp(var(--space-8), 8vw, var(--space-9)); position: relative;
}
body.ms-base:not(#ms-x) .ms-section--tight {
padding-block: clamp(var(--space-7), 5vw, var(--space-8));
}
body.ms-base:not(#ms-x) .ms-section--tint {
background: var(--surface-tint);
}
body.ms-base:not(#ms-x) .ms-section--sunken {
background: var(--surface-sunken);
}
body.ms-base:not(#ms-x) .ms-section--deep, body.ms-base:not(#ms-x) .ms-on-deep {
--text: var(--text-on-deep);
  --text-muted: var(--text-on-deep-muted);
  --text-subtle: var(--text-on-deep-muted);
  --primary: var(--accent-on-deep);
  --primary-hover: var(--laguna-200);
  --on-primary: var(--on-accent);
  --primary-soft: var(--surface-deep-raised);
  --line: var(--line-on-deep);
  --border: var(--border-on-deep);
  --surface: var(--surface-deep-raised);
  --focus: var(--accent-on-deep);
  --spot-text: var(--senal-300);
  --cta: var(--senal-500);
  --cta-hover: var(--senal-300);
  --on-cta: var(--tinta-950);
  color: var(--text);
}
body.ms-base:not(#ms-x) .ms-section--deep {
background: var(--surface-deep); overflow: hidden;
}
body.ms-base:not(#ms-x) .ms-stack {
display: flex; flex-direction: column; gap: var(--space-4);
}
body.ms-base:not(#ms-x) .ms-stack--lg {
gap: var(--space-6);
}
body.ms-base:not(#ms-x) .ms-row {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
}
body.ms-base:not(#ms-x) .ms-grid {
display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
body.ms-base:not(#ms-x) .ms-grid > *, body.ms-base:not(#ms-x) .ms-split > * {
min-width: 0;
}
body.ms-base:not(#ms-x) .ms-split {
display: grid; gap: clamp(var(--space-6), 5vw, var(--space-8)); grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 900px) {
body.ms-base:not(#ms-x) .ms-split {
grid-template-columns: 1.05fr 1fr;
}
body.ms-base:not(#ms-x) .ms-split--even {
grid-template-columns: 1fr 1fr;
}
body.ms-base:not(#ms-x) .ms-split--form {
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}
}
@media (max-width: 899px) {
body.ms-base:not(#ms-x) .ms-split--form > form, body.ms-base:not(#ms-x) .ms-split--form > .ms-split__main {
order: -1;
}
}
body.ms-base:not(#ms-x) .ms-rule {
height: 1px; border: 0; background: var(--line); margin: 0;
}
body.ms-base:not(#ms-x) .ms-bar-laguna {
display: block; width: 64px; height: 4px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--laguna-500), var(--laguna-300));
}
body.ms-base:not(#ms-x) .ms-display, body.ms-base:not(#ms-x) .ms-h1, body.ms-base:not(#ms-x) .ms-h2, body.ms-base:not(#ms-x) .ms-h3, body.ms-base:not(#ms-x) .ms-h4 {
font-family: var(--font-sans); color: var(--text); margin: 0; text-wrap: balance;
}
body.ms-base:not(#ms-x) .ms-display {
font-size: clamp(2.6rem, 1.4rem + 4.6vw, 4.5rem); line-height: 1.02; font-weight: 700; letter-spacing: -0.035em;
}
body.ms-base:not(#ms-x) .ms-h1 {
font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.5rem); line-height: 1.07; font-weight: 700; letter-spacing: -0.03em;
}
body.ms-base:not(#ms-x) .ms-h2 {
font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); line-height: 1.12; font-weight: 600; letter-spacing: -0.025em;
}
body.ms-base:not(#ms-x) .ms-h3 {
font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.5rem); line-height: 1.25; font-weight: 600; letter-spacing: -0.015em;
}
body.ms-base:not(#ms-x) .ms-h4 {
font-size: 1.1875rem; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em;
}
body.ms-base:not(#ms-x) .ms-lead {
font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); line-height: 1.6; color: var(--text-muted); margin: 0; max-width: 62ch; text-wrap: pretty;
}
body.ms-base:not(#ms-x) .ms-body {
font-size: 1rem; line-height: 1.65; color: var(--text-muted); margin: 0; max-width: 65ch;
}
body.ms-base:not(#ms-x) .ms-small {
font-size: 0.875rem; line-height: 1.55; color: var(--text-muted); margin: 0;
}
body.ms-base:not(#ms-x) .ms-caption {
font-size: 0.8125rem; line-height: 1.4; color: var(--text-subtle); margin: 0;
}
body.ms-base:not(#ms-x) .ms-mono {
font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0;
}
body.ms-base:not(#ms-x) .ms-num {
font-variant-numeric: tabular-nums;
}
body.ms-base:not(#ms-x) .ms-hl {
color: var(--primary);
}
body.ms-base:not(#ms-x) .ms-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-label); font-size: 0.75rem; line-height: 1.3; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); margin: 0;
}
body.ms-base:not(#ms-x) .ms-eyebrow::before {
content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--spot); flex: none;
}
body.ms-base:not(#ms-x) .ms-eyebrow--plain::before {
display: none;
}
body.ms-base:not(#ms-x) .ms-link {
color: var(--primary); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: currentColor; transition: color var(--duration-fast) var(--ease-standard), text-decoration-color var(--duration-fast) var(--ease-standard);
}
body.ms-base:not(#ms-x) .ms-link:hover {
color: var(--primary-hover); text-decoration-color: transparent;
}
body.ms-base:not(#ms-x) .ms-btn {
--btn-h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--btn-h); padding: 0 var(--space-5);
  font: 600 0.9375rem/1 var(--font-sans); letter-spacing: -0.005em; white-space: nowrap;
  border-radius: var(--radius-pill); border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
body.ms-base:not(#ms-x) .ms-btn svg {
width: 18px; height: 18px; flex: none; transition: transform var(--duration-base) var(--ease-arrive);
}
body.ms-base:not(#ms-x) .ms-btn:hover svg[data-ms-arrow] {
transform: translateX(3px);
}
body.ms-base:not(#ms-x) .ms-btn:active {
transform: translateY(1px);
}
body.ms-base:not(#ms-x) .ms-btn--primary {
background: var(--cta); color: var(--on-cta);
}
body.ms-base:not(#ms-x) .ms-btn--primary:hover {
background: var(--cta-hover); color: var(--on-cta);
}
body.ms-base:not(#ms-x) .ms-btn--primary:visited, body.ms-base:not(#ms-x) .ms-btn--primary:focus-visible, body.ms-base:not(#ms-x) .ms-btn--primary:active {
color: var(--on-cta);
}
body.ms-base:not(#ms-x) .ms-btn--secondary, body.ms-base:not(#ms-x) .ms-btn--secondary:visited {
background: transparent; color: var(--text); border-color: var(--border);
}
body.ms-base:not(#ms-x) .ms-btn--secondary:hover {
border-color: var(--cta); color: var(--cta);
}
body.ms-base:not(#ms-x) .ms-btn--ghost {
background: transparent; color: var(--primary); padding-inline: var(--space-3);
}
body.ms-base:not(#ms-x) .ms-btn--ghost:hover {
background: var(--spot-soft); color: var(--cta-hover);
}
body.ms-base:not(#ms-x) .ms-btn--sm {
--btn-h: 38px; padding: 0 var(--space-4); font-size: 0.875rem;
}
body.ms-base:not(#ms-x) .ms-btn--lg {
--btn-h: 56px; padding: 0 var(--space-6); font-size: 1rem;
}
body.ms-base:not(#ms-x) .ms-btn[disabled], body.ms-base:not(#ms-x) .ms-btn[aria-disabled="true"] {
opacity: .45; cursor: not-allowed; pointer-events: none;
}
body.ms-base:not(#ms-x) .ms-tag {
display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border-radius: var(--radius-pill); font: 600 0.75rem/1 var(--font-sans); letter-spacing: 0.02em;
  background: var(--primary-soft); color: var(--text); white-space: nowrap;
}
body.ms-base:not(#ms-x) .ms-tag--laguna, body.ms-base:not(#ms-x) .ms-tag--markt {
background: var(--laguna-500); color: var(--white); letter-spacing: 0.08em;
}
body.ms-base:not(#ms-x) .ms-tag--senal, body.ms-base:not(#ms-x) .ms-tag--spot {
background: var(--spot-fill); color: var(--on-spot-fill); letter-spacing: 0.04em;
}
body.ms-base:not(#ms-x) .ms-tag--outline {
background: transparent; box-shadow: inset 0 0 0 1px var(--border); color: var(--text-muted);
}
body.ms-base:not(#ms-x) .ms-tag--code {
font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; background: var(--surface-sunken); color: var(--text-muted);
}
body.ms-base:not(#ms-x) .ms-tag--success {
background: transparent; box-shadow: inset 0 0 0 1px var(--success); color: var(--success);
}
body.ms-base:not(#ms-x) .ms-tag--warning {
background: transparent; box-shadow: inset 0 0 0 1px var(--warning); color: var(--warning);
}
body.ms-base:not(#ms-x) .ms-tag--danger {
background: transparent; box-shadow: inset 0 0 0 1px var(--danger); color: var(--danger);
}
body.ms-base:not(#ms-x) .ms-icon {
width: 24px; height: 24px; flex: none; color: currentColor;
}
body.ms-base:not(#ms-x) .ms-icon--lg {
width: 32px; height: 32px;
}
body.ms-base:not(#ms-x) .ms-icon-badge {
display: grid; place-items: center; flex: none; width: 52px; height: 52px; aspect-ratio: 1; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary); --icon-spot: var(--spot);
}
body.ms-base:not(#ms-x) .ms-card {
display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-6); color: var(--text);
  transition: border-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-arrive), box-shadow var(--duration-base) var(--ease-standard);
}
body.ms-base:not(#ms-x) .ms-card > .ms-icon-badge {
margin-bottom: var(--space-2);
}
body.ms-base:not(#ms-x) .ms-card__title {
font: 600 1.1875rem/1.3 var(--font-sans); letter-spacing: -0.01em; margin: 0; color: var(--text);
}
body.ms-base:not(#ms-x) .ms-card__text {
font-size: 0.9375rem; line-height: 1.6; color: var(--text-muted); margin: 0;
}
body.ms-base:not(#ms-x) .ms-card__foot {
margin-top: auto; padding-top: var(--space-3);
}
body.ms-base:not(#ms-x) a.ms-card {
text-decoration: none;
}
/* Hover solo en tarjetas que se pueden pulsar (enlace, botón o formulario dentro); sin nada de eso, estática */
body.ms-base:not(#ms-x) a.ms-card:hover, body.ms-base:not(#ms-x) .ms-card:where(:has(a[href], button, form, input, select, textarea)):hover {
border-color: var(--primary); transform: translateY(-3px); box-shadow: 0 0 0 1px var(--primary), var(--shadow-md);
}
body.ms-base:not(#ms-x) :is(a.ms-card--deep, .ms-card--deep:where(:has(a[href], button, form, input, select, textarea)), .ms-on-deep a.ms-card, .ms-on-deep .ms-card:where(:has(a[href], button, form, input, select, textarea))):hover {
border-color: var(--text-on-deep); box-shadow: 0 0 0 1px var(--text-on-deep), var(--shadow-lg);
}
body.ms-base:not(#ms-x) .ms-card--tint {
background: var(--surface-tint); border-color: transparent;
}
body.ms-base:not(#ms-x) .ms-card--deep {
background: var(--surface-deep); border-color: transparent;
}
body.ms-base:not(#ms-x) .ms-card--row {
flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); padding: var(--space-5) var(--space-6);
}
body.ms-base:not(#ms-x) .ms-card--row > .ms-icon-badge {
margin-bottom: 0;
}
body.ms-base:not(#ms-x) .ms-card__body {
flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1);
}
body.ms-base:not(#ms-x) .ms-card--deep {
--text: var(--text-on-deep); --text-muted: var(--text-on-deep-muted); --primary: var(--accent-on-deep); --primary-soft: var(--surface-deep-raised);
}
body.ms-base:not(#ms-x) .ms-stat {
display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
body.ms-base:not(#ms-x) .ms-stat__value {
font: 600 clamp(2.25rem, 1.7rem + 2vw, 3.5rem)/1 var(--font-sans); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--text);
}
body.ms-base:not(#ms-x) .ms-stat__value small {
font-size: 0.45em; font-weight: 500; letter-spacing: 0; color: var(--text-muted); margin-left: 4px;
}
body.ms-base:not(#ms-x) .ms-stat__label {
font-size: 0.875rem; font-weight: 500; color: var(--text);
}
body.ms-base:not(#ms-x) .ms-stat__note {
font-size: 0.8125rem; color: var(--text-subtle);
}
body.ms-base:not(#ms-x) .ms-stats {
display: grid; gap: var(--space-5) var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}
body.ms-base:not(#ms-x) .ms-stats--ruled > .ms-stat {
padding-top: var(--space-4); border-top: 1px solid var(--line);
}
@media (max-width: 640px) {
body.ms-base:not(#ms-x) .ms-stats--line {
grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3);
}
body.ms-base:not(#ms-x) .ms-stats--line > .ms-stat--opt {
display: none;
}
body.ms-base:not(#ms-x) .ms-stats--line .ms-stat__value {
font-size: clamp(1.375rem, 6.4vw, 2.25rem); white-space: nowrap;
}
body.ms-base:not(#ms-x) .ms-stats--line .ms-stat__label {
font-size: 0.75rem;
}
}
@media (min-width: 641px) {
body.ms-base:not(#ms-x) .ms-stats--line {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
body.ms-base:not(#ms-x) .ms-stats--line .ms-stat__value {
font-size: clamp(1.75rem, 3.4vw + 0.5rem, 3.5rem); white-space: nowrap;
}
}
body.ms-base:not(#ms-x) .ms-form {
display: grid; gap: var(--space-4); grid-template-columns: 1fr;
}
@media (min-width: 640px) {
body.ms-base:not(#ms-x) .ms-form--2 {
grid-template-columns: 1fr 1fr;
}
body.ms-base:not(#ms-x) .ms-form--2 .ms-field--full {
grid-column: 1 / -1;
}
}
body.ms-base:not(#ms-x) .ms-field {
display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
body.ms-base:not(#ms-x) .ms-label {
font-size: 0.875rem; font-weight: 500; color: var(--text);
}
body.ms-base:not(#ms-x) .ms-help {
font-size: 0.8125rem; color: var(--text-subtle);
}
body.ms-base:not(#ms-x) .ms-input, body.ms-base:not(#ms-x) .ms-select, body.ms-base:not(#ms-x) .ms-textarea {
width: 100%; min-width: 0; height: 48px; padding: 0 var(--space-4);
  font: 400 1rem/1.4 var(--font-sans); color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
body.ms-base:not(#ms-x) .ms-textarea {
height: auto; min-height: 120px; padding: var(--space-3) var(--space-4); resize: vertical;
}
body.ms-base:not(#ms-x) .ms-select {
appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 22px) 21px, calc(100% - 16px) 21px; background-size: 6px 6px; background-repeat: no-repeat;
}
body.ms-base:not(#ms-x) .ms-input::placeholder, body.ms-base:not(#ms-x) .ms-textarea::placeholder {
color: var(--text-subtle);
}
body.ms-base:not(#ms-x) .ms-input:hover, body.ms-base:not(#ms-x) .ms-select:hover, body.ms-base:not(#ms-x) .ms-textarea:hover {
border-color: var(--text-muted);
}
body.ms-base:not(#ms-x) .ms-input:focus, body.ms-base:not(#ms-x) .ms-select:focus, body.ms-base:not(#ms-x) .ms-textarea:focus {
outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-soft);
}
body.ms-base:not(#ms-x) .ms-field--error .ms-input, body.ms-base:not(#ms-x) .ms-field--error .ms-select, body.ms-base:not(#ms-x) .ms-field--error .ms-textarea {
border-color: var(--danger);
}
body.ms-base:not(#ms-x) .ms-field--error .ms-help {
color: var(--danger);
}
body.ms-base:not(#ms-x) .ms-check {
display: flex; gap: 10px; align-items: flex-start; font-size: 0.875rem; line-height: 1.5; color: var(--text-muted); cursor: pointer;
}
body.ms-base:not(#ms-x) .ms-check input {
appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; border: 1.5px solid var(--border); border-radius: var(--radius-xs); background: var(--surface); display: grid; place-items: center; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard);
}
body.ms-base:not(#ms-x) .ms-check input::after {
content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--on-primary); transform: scale(0); transition: transform var(--duration-fast) var(--ease-arrive);
}
body.ms-base:not(#ms-x) .ms-check input:checked {
background: var(--primary); border-color: var(--primary);
}
body.ms-base:not(#ms-x) .ms-check input:checked::after {
transform: scale(1);
}
body.ms-base:not(#ms-x) .ms-nav {
position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--nav-bg); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line);
}
body.ms-base:not(#ms-x) .ms-nav__inner {
display: flex; align-items: center; gap: var(--space-5); height: 72px;
}
body.ms-base:not(#ms-x) .ms-nav__logo {
display: flex; align-items: center; height: 34px; flex: none;
}
body.ms-base:not(#ms-x) .ms-nav__logo img {
height: 34px; width: auto;
}
body.ms-base:not(#ms-x) .ms-nav__links {
display: none; gap: var(--space-5); margin-left: auto; align-items: center;
}
body.ms-base:not(#ms-x) .ms-nav__links a {
color: var(--text); text-decoration: none; font-size: 0.9375rem; font-weight: 500; transition: color var(--duration-fast) var(--ease-standard);
}
body.ms-base:not(#ms-x) .ms-nav__links a[aria-current="page"] {
color: var(--primary);
}
body.ms-base:not(#ms-x) .ms-nav__links a:hover {
color: var(--cta);
}
body.ms-base:not(#ms-x) .ms-nav__cta {
margin-left: auto;
}
@media (min-width: 860px) {
body.ms-base:not(#ms-x) .ms-nav__links {
display: flex;
}
body.ms-base:not(#ms-x) .ms-nav__cta {
margin-left: 0;
}
}
body.ms-base:not(#ms-x) .ms-hero {
position: relative; padding-block: clamp(var(--space-7), 7vw, var(--space-9)) clamp(var(--space-7), 6vw, var(--space-8)); overflow: hidden;
}
body.ms-base:not(#ms-x) .ms-hero__copy {
display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start;
}
body.ms-base:not(#ms-x) .ms-hero__actions {
display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2);
}
body.ms-base:not(#ms-x) .ms-hero__visual {
position: relative; width: 100%; max-width: 560px; justify-self: center; aspect-ratio: 1 / 1;
}
body.ms-base:not(#ms-x) .ms-hero__visual svg {
width: 100%; height: 100%; display: block;
}
body.ms-base:not(#ms-x) .ms-section-head {
display: flex; flex-direction: column; gap: var(--space-4); max-width: 720px; margin-bottom: clamp(var(--space-6), 4vw, var(--space-7));
}
body.ms-base:not(#ms-x) .ms-section-head--center {
align-items: center; text-align: center; margin-inline: auto;
}
body.ms-base:not(#ms-x) .ms-steps {
list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: 1fr; counter-reset: ms-step;
}
@media (min-width: 860px) {
body.ms-base:not(#ms-x) .ms-steps {
grid-template-columns: repeat(var(--steps, 3), 1fr); gap: var(--space-6);
}
}
body.ms-base:not(#ms-x) .ms-step {
position: relative; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding-top: var(--space-7); counter-increment: ms-step;
}
body.ms-base:not(#ms-x) .ms-step::before {
content: counter(ms-step); position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font: 600 0.9375rem/1 var(--font-sans);
  background: var(--primary); color: var(--on-primary);
}
body.ms-base:not(#ms-x) .ms-step::after {
content: ""; position: absolute; top: 19px; left: 52px; right: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 12px);
}
body.ms-base:not(#ms-x) .ms-step:last-child::after {
display: none;
}
body.ms-base:not(#ms-x) .ms-steps.ms-steps--vertical {
grid-template-columns: minmax(0, 1fr); gap: var(--space-5);
}
body.ms-base:not(#ms-x) .ms-steps--vertical .ms-step {
padding-top: 0; padding-left: 56px; min-height: 40px; justify-content: center; gap: var(--space-1);
}
body.ms-base:not(#ms-x) .ms-steps--vertical .ms-step::after {
top: 46px; bottom: calc(-1 * var(--space-5) + 6px); left: 19px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--border) 0 6px, transparent 6px 12px);
}
body.ms-base:not(#ms-x) .ms-steps--vertical .ms-step__text {
color: var(--text);
}
@media (max-width: 859px) {
body.ms-base:not(#ms-x) .ms-steps:not(.ms-steps--vertical) .ms-step {
padding-top: 0; padding-left: 56px; min-height: 40px; gap: var(--space-1); padding-bottom: 0;
}
body.ms-base:not(#ms-x) .ms-steps:not(.ms-steps--vertical) .ms-step::after {
display: block; top: 46px; bottom: calc(-1 * var(--space-5) + 6px); left: 19px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--border) 0 6px, transparent 6px 12px);
}
body.ms-base:not(#ms-x) .ms-steps:not(.ms-steps--vertical) .ms-step:last-child::after {
display: none;
}
body.ms-base:not(#ms-x) .ms-steps:not(.ms-steps--vertical) .ms-step__meta {
padding-top: 11px;
}
}
body.ms-base:not(#ms-x) .ms-step__meta {
font: 600 0.75rem/1.3 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--spot-text);
}
body.ms-base:not(#ms-x) .ms-step__title {
font: 600 1.1875rem/1.3 var(--font-sans); margin: 0; color: var(--text);
}
body.ms-base:not(#ms-x) .ms-step__text {
font-size: 0.9375rem; line-height: 1.6; color: var(--text-muted); margin: 0;
}
body.ms-base:not(#ms-x) .ms-faq {
border-top: 1px solid var(--line);
}
body.ms-base:not(#ms-x) .ms-faq details {
border-bottom: 1px solid var(--line);
}
body.ms-base:not(#ms-x) .ms-faq summary {
list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding: var(--space-5) 0; font: 600 1.0625rem/1.4 var(--font-sans); color: var(--text);
}
body.ms-base:not(#ms-x) .ms-faq summary::-webkit-details-marker {
display: none;
}
body.ms-base:not(#ms-x) .ms-faq summary::after {
content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--primary-soft);
  -webkit-mask: none; box-shadow: inset 0 0 0 1px transparent;
  background-image: linear-gradient(var(--primary), var(--primary)), linear-gradient(var(--primary), var(--primary));
  background-size: 12px 1.75px, 1.75px 12px; background-position: center; background-repeat: no-repeat;
  transition: transform var(--duration-base) var(--ease-arrive);
}
body.ms-base:not(#ms-x) .ms-faq details[open] summary::after {
transform: rotate(45deg);
}
body.ms-base:not(#ms-x) .ms-faq summary:hover {
color: var(--primary);
}
body.ms-base:not(#ms-x) .ms-faq__body {
padding: 0 var(--space-7) var(--space-5) 0; color: var(--text-muted); font-size: 0.9375rem; line-height: 1.65; max-width: 70ch;
}
body.ms-base:not(#ms-x) .ms-faq details[open] .ms-faq__body {
animation: ms-rise var(--duration-base) var(--ease-arrive);
}
body.ms-base:not(#ms-x) .ms-cta {
position: relative; border-radius: var(--radius-xl); background: var(--surface-deep); padding: clamp(var(--space-6), 6vw, var(--space-8)); overflow: hidden; isolation: isolate;
}
body.ms-base:not(#ms-x) .ms-cta > .ms-motif {
position: absolute; right: -12%; top: 50%; width: min(70%, 560px); transform: translateY(-50%); z-index: -1; opacity: .9;
}
body.ms-base:not(#ms-x) .ms-cta__copy {
display: flex; flex-direction: column; gap: var(--space-4); max-width: 560px; align-items: flex-start;
}
body.ms-base:not(#ms-x) .ms-footer {
background: var(--surface-deep); padding-block: var(--space-8) var(--space-6);
}
body.ms-base:not(#ms-x) .ms-footer__grid {
display: grid; gap: var(--space-6); grid-template-columns: 1fr;
}
@media (min-width: 760px) {
body.ms-base:not(#ms-x) .ms-footer__grid {
grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
}
body.ms-base:not(#ms-x) .ms-footer h4 {
font: 600 0.75rem/1.3 var(--font-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--space-3);
}
body.ms-base:not(#ms-x) .ms-footer ul {
list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2);
}
body.ms-base:not(#ms-x) .ms-footer a {
color: var(--text); text-decoration: none; font-size: 0.9375rem;
}
body.ms-base:not(#ms-x) .ms-footer a:hover {
color: var(--primary);
}
body.ms-base:not(#ms-x) .ms-footer__legal {
margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); justify-content: space-between; font-size: 0.8125rem; color: var(--text-muted);
}
body.ms-base:not(#ms-x) .ms-gantt-wrap {
overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface);
}
body.ms-base:not(#ms-x) .ms-gantt {
--cols: 12; display: grid; grid-template-columns: minmax(180px, 1.6fr) repeat(var(--cols), minmax(36px, 1fr)); min-width: 640px; font-size: 0.8125rem;
}
body.ms-base:not(#ms-x) .ms-gantt > * {
border-bottom: 1px solid var(--line); min-height: 40px; display: flex; align-items: center;
}
body.ms-base:not(#ms-x) .ms-gantt__head {
background: var(--surface-sunken); font: 600 0.6875rem/1.2 var(--font-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); justify-content: center; text-align: center;
}
body.ms-base:not(#ms-x) .ms-gantt__task {
padding: 0 var(--space-3); gap: 10px; color: var(--text); font-weight: 500;
}
body.ms-base:not(#ms-x) .ms-gantt__task b {
display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-deep); color: var(--text-on-deep); font: 600 0.6875rem/1 var(--font-mono); flex: none;
}
body.ms-base:not(#ms-x) .ms-gantt__track {
grid-column: 2 / -1; display: grid; grid-template-columns: repeat(var(--cols), 1fr); padding: 0; background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: calc(100% / var(--cols)) 100%;
}
body.ms-base:not(#ms-x) .ms-gantt__bar {
grid-row: 1; height: 22px; margin: 0 3px; border-radius: var(--radius-xs); background: var(--laguna-500); color: var(--white);
  font: 600 0.6875rem/22px var(--font-mono); text-align: center; transform-origin: left center;
}
body.ms-base:not(#ms-x) .ms-gantt__bar--client {
background: repeating-linear-gradient(135deg, var(--laguna-200) 0 5px, var(--laguna-100) 5px 10px); color: var(--laguna-800);
}
body.ms-base:not(#ms-x) .ms-gantt__bar--milestone {
background: var(--spot); color: var(--tinta-950);
}
body.ms-base:not(#ms-x) .ms-legend {
display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: 0.8125rem; color: var(--text-muted); margin: 0; padding: 0; list-style: none;
}
body.ms-base:not(#ms-x) .ms-legend li {
display: inline-flex; align-items: center; gap: 8px;
}
body.ms-base:not(#ms-x) .ms-legend i {
display: inline-block; width: 18px; height: 10px; border-radius: 3px; background: var(--swatch, var(--data-1));
}
body.ms-base:not(#ms-x) .ms-bars {
display: grid; gap: var(--space-3);
}
body.ms-base:not(#ms-x) .ms-bars__row {
display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; gap: var(--space-3); align-items: center; font-size: 0.875rem;
}
body.ms-base:not(#ms-x) .ms-bars__track {
height: 12px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden;
}
body.ms-base:not(#ms-x) .ms-bars__fill {
display: block; height: 100%; border-radius: inherit; background: var(--swatch, var(--data-1)); transform-origin: left center;
}
body.ms-base:not(#ms-x) .ms-bars__val {
font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text);
}
body.ms-base:not(#ms-x) .ms-motif {
display: block; pointer-events: none;
}
body.ms-base:not(#ms-x) .ms-hexmap .h1 {
fill: var(--hex-1);
}
body.ms-base:not(#ms-x) .ms-hexmap .h2 {
fill: var(--hex-2);
}
body.ms-base:not(#ms-x) .ms-hexmap .h3 {
fill: var(--hex-3);
}
body.ms-base:not(#ms-x) .ms-hexmap .h4 {
fill: var(--hex-4);
}
body.ms-base:not(#ms-x) .ms-hexmap .h5 {
fill: var(--hex-5);
}
body.ms-base:not(#ms-x) .ms-hexmap .h6 {
fill: var(--hex-6);
}
body.ms-base:not(#ms-x) .ms-hexmap polygon {
stroke: var(--hex-stroke); stroke-width: 1.5;
}
body.ms-base:not(#ms-x) .ms-iso circle {
fill: none; stroke: var(--iso-stroke, var(--laguna-500)); stroke-width: 1.25;
}
body.ms-base:not(#ms-x) .ms-iso circle:nth-child(2n) {
stroke-dasharray: 2 5;
}
body.ms-base:not(#ms-x) .ms-spot-dot {
fill: var(--spot);
}
body.ms-base:not(#ms-x) .ms-spot-ring {
fill: none; stroke: var(--spot); stroke-width: 2; transform-box: fill-box; transform-origin: center;
}
body.ms-base:not(#ms-x) .ms-pattern-hex {
background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5' viewBox='0 0 28 48.5'%3E%3Cpath d='M14 0l14 8.08v16.17L14 32.33 0 24.25V8.08zM14 32.33l14 8.09V56.6M0 40.42l14-8.09' fill='none' stroke='%23128888' stroke-opacity='.18' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 28px 48.5px;
}
@keyframes ms-rise {
from {
opacity: 0; transform: translateY(12px);
}
to {
opacity: 1; transform: none;
}
}
@keyframes ms-fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes ms-grow {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
@keyframes ms-ping {
0% {
transform: scale(1); opacity: .85;
}
50% {
opacity: 0;
}
70%, 100% {
transform: scale(2.1); opacity: 0;
}
}
@keyframes ms-hex-in {
from {
opacity: .3; transform: scale(.82);
}
to {
opacity: 1; transform: scale(1);
}
}
body.ms-base:not(#ms-x) .ms-ping {
animation: ms-ping 2.4s var(--ease-exit) infinite;
}
body.ms-base:not(#ms-x) .ms-ping--2 {
animation-delay: 1.2s;
}
.ms-reveal-ready body.ms-base:not(#ms-x) [data-ms-reveal]:not(.is-in) {
opacity: 0; transform: translateY(12px);
}
.ms-reveal-ready body.ms-base:not(#ms-x) [data-ms-reveal].is-in {
animation: ms-rise var(--duration-slower) var(--ease-arrive) both; animation-delay: calc(var(--i, 0) * 70ms);
}
.ms-reveal-ready body.ms-base:not(#ms-x) [data-ms-grow]:not(.is-in) {
transform: scaleX(0);
}
.ms-reveal-ready body.ms-base:not(#ms-x) [data-ms-grow].is-in {
animation: ms-grow var(--duration-slower) var(--ease-arrive) both; animation-delay: calc(var(--i, 0) * 60ms);
}
body.ms-base:not(#ms-x) .ms-hexmap.is-animated polygon {
transform-box: fill-box; transform-origin: center; animation: ms-hex-in var(--duration-slow) var(--ease-arrive) both; animation-delay: calc(var(--d, 0) * 1ms);
}
@media (prefers-reduced-motion: reduce) {
body.ms-base:not(#ms-x) .ms-ping, body.ms-base:not(#ms-x) .ms-hexmap.is-animated polygon {
animation: none;
}
body.ms-base:not(#ms-x) .ms-ping {
opacity: 0;
}
.ms-reveal-ready body.ms-base:not(#ms-x) [data-ms-reveal]:not(.is-in), .ms-reveal-ready body.ms-base:not(#ms-x) [data-ms-grow]:not(.is-in) {
opacity: 1; transform: none;
}
.ms-reveal-ready body.ms-base:not(#ms-x) [data-ms-reveal].is-in, .ms-reveal-ready body.ms-base:not(#ms-x) [data-ms-grow].is-in {
animation: ms-fade var(--duration-base) linear both;
}
body.ms-base:not(#ms-x) .ms-btn, body.ms-base:not(#ms-x) .ms-card, body.ms-base:not(#ms-x) .ms-btn svg, body.ms-base:not(#ms-x) .ms-faq summary::after {
transition: none;
}
}
body.ms-base:not(#ms-x) .ms-preview {
padding: var(--space-5); background: var(--bg); color: var(--text); font-family: var(--font-sans);
}
body.ms-base:not(#ms-x) .ms-preview--surface {
background: var(--surface);
}
body.ms-base:not(#ms-x) .ms-logo {
display: block; height: 34px; width: auto; max-width: 100%; align-self: flex-start; color: var(--text); flex: none;
}
body.ms-base:not(#ms-x) .ms-logo--lg {
height: 64px;
}
body.ms-base:not(#ms-x) .ms-section--deep .ms-logo, body.ms-base:not(#ms-x) .ms-on-deep .ms-logo, body.ms-base:not(#ms-x) .ms-footer .ms-logo {
color: var(--text-on-deep);
}
.ms-reveal-ready body.ms-base:not(#ms-x) [data-ms-reveal].is-in.is-static, .ms-reveal-ready body.ms-base:not(#ms-x) [data-ms-grow].is-in.is-static {
animation: none;
}
body.ms-base:not(#ms-x) .ms-hero__chip {
position: absolute; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  font-size: 0.8125rem; color: var(--text); min-width: 0;
}
body.ms-base:not(#ms-x) .ms-hero__chip b {
font-weight: 600;
}
body.ms-base:not(#ms-x) .ms-hero__chip span {
font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-subtle); letter-spacing: 0.02em;
}
body.ms-base:not(#ms-x) .ms-tabs {
display: inline-flex; flex-wrap: nowrap; gap: 4px; padding: 4px; max-width: 100%; border-radius: var(--radius-pill); background: var(--surface-sunken);
}
body.ms-base:not(#ms-x) .ms-tabs .ms-tab {
white-space: nowrap;
}
@media (max-width: 640px) {
body.ms-base:not(#ms-x) .ms-tabs {
gap: 2px; padding: 3px;
}
body.ms-base:not(#ms-x) .ms-tabs .ms-tab {
height: 40px; padding: 0 10px; gap: 6px; font-size: clamp(0.6875rem, 3.2vw, 0.875rem);
}
body.ms-base:not(#ms-x) .ms-tabs .ms-tab[aria-selected="true"]::before {
width: 6px; height: 6px;
}
}
@media (max-width: 360px) {
body.ms-base:not(#ms-x) .ms-tabs .ms-tab {
padding: 0 8px; gap: 5px;
}
}
body.ms-base:not(#ms-x) .ms-tab {
display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 var(--space-5); border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-muted); font: 600 0.9375rem/1 var(--font-sans); cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
body.ms-base:not(#ms-x) .ms-tab:hover {
color: var(--text);
}
body.ms-base:not(#ms-x) .ms-tab[aria-selected="true"] {
background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm);
}
body.ms-base:not(#ms-x) .ms-tab[aria-selected="true"]::before {
content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--spot);
}
body.ms-base:not(#ms-x) .ms-tabpanel {
margin-top: var(--space-6);
}
body.ms-base:not(#ms-x) .ms-carousel {
display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; list-style: none; margin: 0; padding: 4px 2px 8px;
}
body.ms-base:not(#ms-x) .ms-carousel::-webkit-scrollbar {
display: none;
}
body.ms-base:not(#ms-x) .ms-carousel > * {
scroll-snap-align: start; flex: 0 0 calc((100% - 3 * var(--space-4)) / 4); min-width: 0;
}
body.ms-base:not(#ms-x) .ms-carousel--3 > * {
flex-basis: calc((100% - 2 * var(--space-4)) / 3);
}
body.ms-base:not(#ms-x) .ms-carousel--5 > * {
flex-basis: calc((100% - 4 * var(--space-4)) / 5);
}
@media (max-width: 1024px) {
body.ms-base:not(#ms-x) .ms-carousel > *, body.ms-base:not(#ms-x) .ms-carousel--5 > * {
flex-basis: calc((100% - var(--space-4)) / 2);
}
body.ms-base:not(#ms-x) .ms-carousel--3 > * {
flex-basis: calc((100% - var(--space-4)) / 2);
}
}
@media (max-width: 640px) {
body.ms-base:not(#ms-x) .ms-carousel > *, body.ms-base:not(#ms-x) .ms-carousel--3 > *, body.ms-base:not(#ms-x) .ms-carousel--5 > * {
flex-basis: 86%;
}
}
body.ms-base:not(#ms-x) .ms-carousel-nav {
display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-3);
}
body.ms-base:not(#ms-x) .ms-carousel-nav[hidden] {
display: none !important;
}
body.ms-base:not(#ms-x) .ms-icon-btn {
display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
body.ms-base:not(#ms-x) .ms-icon-btn:hover {
border-color: var(--primary); color: var(--primary);
}
body.ms-base:not(#ms-x) .ms-icon-btn svg {
width: 20px; height: 20px;
}
body.ms-base:not(#ms-x) .ms-table-wrap {
overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
}
body.ms-base:not(#ms-x) .ms-table {
width: 100%; min-width: 680px; border-collapse: collapse; font-size: 0.9375rem;
}
body.ms-base:not(#ms-x) .ms-table th, body.ms-base:not(#ms-x) .ms-table td {
padding: var(--space-4) var(--space-5); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line);
}
body.ms-base:not(#ms-x) .ms-table thead th {
background: var(--surface-sunken); font: 600 0.75rem/1.3 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
}
body.ms-base:not(#ms-x) .ms-table thead th.is-featured {
background: var(--surface-deep); color: var(--text-on-deep);
}
body.ms-base:not(#ms-x) .ms-table tbody th {
font-weight: 500; color: var(--text);
}
body.ms-base:not(#ms-x) .ms-table td {
color: var(--text-muted);
}
body.ms-base:not(#ms-x) .ms-table td.is-featured {
background: var(--surface-tint); color: var(--text);
}
body.ms-base:not(#ms-x) .ms-table tr:last-child > * {
border-bottom: 0;
}
body.ms-base:not(#ms-x) .ms-yes {
display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 500;
}
body.ms-base:not(#ms-x) .ms-yes::before {
content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
}
body.ms-base:not(#ms-x) .ms-matrix {
--mx-label: 28px; --mx-space: 16px; --mx-gap: var(--space-2); --mx-xh: 32px; --mx-axis: var(--text-muted); position: relative; display: grid; grid-template-columns: calc(var(--mx-label) + var(--mx-space)) repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto calc(var(--mx-xh) + var(--mx-space)); gap: var(--mx-gap); padding: 14px 14px 0 0;
}
body.ms-base:not(#ms-x) .ms-matrix::before {
content: ""; position: absolute; top: 4px; right: 4px; left: var(--mx-label); bottom: var(--mx-xh); border-left: 2px dashed var(--mx-axis); border-bottom: 2px dashed var(--mx-axis); border-bottom-left-radius: var(--radius-lg); pointer-events: none;
}
body.ms-base:not(#ms-x) .ms-matrix__x::before {
content: ""; position: absolute; top: 0; left: calc(var(--mx-label) + 1px - 6px); border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid var(--mx-axis);
}
body.ms-base:not(#ms-x) .ms-matrix__x::after {
content: ""; position: absolute; right: 0; bottom: calc(var(--mx-xh) + 1px - 6px); border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid var(--mx-axis);
}
body.ms-base:not(#ms-x) .ms-matrix__y {
grid-row: 1 / span 2; justify-self: start; width: var(--mx-label); writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; align-self: center; font: 600 0.6875rem/1 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
}
body.ms-base:not(#ms-x) .ms-matrix__x {
grid-column: 2 / span 2; align-self: end; text-align: center; font: 600 0.6875rem/1 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); padding-bottom: 4px;
}
body.ms-base:not(#ms-x) .ms-matrix__cell {
min-height: 150px; padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-2);
}
body.ms-base:not(#ms-x) .ms-matrix__cell h4 {
margin: 0; font: 600 1rem/1.3 var(--font-sans); color: var(--text);
}
body.ms-base:not(#ms-x) .ms-matrix__cell p {
margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--text-muted);
}
body.ms-base:not(#ms-x) .ms-matrix__cell--best {
background: var(--laguna-50); border-color: transparent;
}
body.ms-base:not(#ms-x) .ms-matrix__cell--best h4, body.ms-base:not(#ms-x) .ms-matrix__cell--best p {
color: var(--laguna-800);
}
body.ms-base:not(#ms-x) .ms-matrix__cell--focus {
border: 2px solid var(--spot);
}
@media (max-width: 640px) {
body.ms-base:not(#ms-x) .ms-matrix {
--mx-xh: 44px; --mx-space: 12px;
}
body.ms-base:not(#ms-x) .ms-matrix__x {
line-height: 1.35;
}
body.ms-base:not(#ms-x) .ms-matrix__cell {
min-height: 0; padding: var(--space-3); justify-content: center;
}
body.ms-base:not(#ms-x) .ms-matrix__cell p {
display: none;
}
body.ms-base:not(#ms-x) .ms-matrix__cell h4 {
font-size: 0.9375rem;
}
}
body.ms-base:not(#ms-x) .ms-matrix__cell--focus h4::before {
content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--spot); margin-right: 8px; vertical-align: 2px;
}
body.ms-base:not(#ms-x) .ms-icon-rows {
list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3);
}
body.ms-base:not(#ms-x) .ms-icon-row {
display: flex; gap: var(--space-3); align-items: center; color: var(--text); font-size: 1rem; line-height: 1.45; min-width: 0;
}
body.ms-base:not(#ms-x) .ms-icon-chip {
flex: none; width: 36px; height: 36px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); --icon-spot: var(--spot);
}
body.ms-base:not(#ms-x) .ms-icon-chip svg {
width: 20px; height: 20px;
}
body.ms-base:not(#ms-x) .ms-icon-list {
list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3);
}
body.ms-base:not(#ms-x) .ms-icon-list li {
display: flex; gap: var(--space-3); align-items: flex-start; color: var(--text);
}
body.ms-base:not(#ms-x) .ms-icon-list li > svg {
color: var(--primary); --icon-spot: var(--spot); margin-top: 1px;
}
body.ms-base:not(#ms-x) .ms-checks {
list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3);
}
body.ms-base:not(#ms-x) .ms-checks li {
display: flex; gap: var(--space-3); align-items: flex-start;
}
body.ms-base:not(#ms-x) .ms-checks li::before {
content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--primary-soft) radial-gradient(circle, var(--primary) 0 4px, transparent 4.5px);
}
body.ms-base:not(#ms-x) .ms-media {
position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-sunken);
}
body.ms-base:not(#ms-x) .ms-media > img {
display: block; width: 100%; height: 100%; object-fit: cover;
}
body.ms-base:not(#ms-x) .ms-media--placeholder {
display: grid; place-items: center; background: var(--surface-deep); color: var(--text-on-deep-muted);
}
body.ms-base:not(#ms-x) .ms-media--placeholder::after {
content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5' viewBox='0 0 28 48.5'%3E%3Cpath d='M14 0l14 8.08v16.17L14 32.33 0 24.25V8.08zM14 32.33l14 8.09V56.6M0 40.42l14-8.09' fill='none' stroke='%2361CCCD' stroke-opacity='.16' stroke-width='1'/%3E%3C/svg%3E"); pointer-events: none;
}
body.ms-base:not(#ms-x) .ms-media__label {
position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; padding: var(--space-4); font: 600 0.75rem/1.4 var(--font-label); letter-spacing: 0.06em; text-transform: uppercase;
}
body.ms-base:not(#ms-x) .ms-media__label svg {
width: 32px; height: 32px; color: var(--accent-on-deep); --icon-spot: var(--spot);
}
body.ms-base:not(#ms-x) .ms-person {
display: flex; gap: var(--space-4); align-items: center;
}
body.ms-base:not(#ms-x) .ms-avatar {
flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-deep); color: var(--text-on-deep); font: 600 1.125rem/1 var(--font-sans); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--spot);
}
body.ms-base:not(#ms-x) .ms-person__name {
font-weight: 600; color: var(--text);
}
body.ms-base:not(#ms-x) .ms-person__role {
font-size: 0.875rem; color: var(--text-muted);
}
body.ms-base:not(#ms-x) .ms-fieldset {
border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4) var(--space-4); margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
}
body.ms-base:not(#ms-x) .ms-fieldset legend {
padding: 0 6px; font-size: 0.875rem; font-weight: 500; color: var(--text);
}
body.ms-base:not(#ms-x) .ms-check input[type="radio"] {
border-radius: 50%;
}
body.ms-base:not(#ms-x) .ms-mbar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: none; gap: var(--space-2); background: var(--nav-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding: var(--space-3) max(var(--space-4), env(safe-area-inset-right, 0px)) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)) max(var(--space-4), env(safe-area-inset-left, 0px));
}
body.ms-base:not(#ms-x) .ms-mbar > * {
flex: 1 1 0;
}
body.ms-base:not(#ms-x) .ms-fab {
position: fixed; right: calc(var(--space-5) + env(safe-area-inset-right, 0px)); bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); z-index: 10; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-deep); color: var(--text-on-deep); box-shadow: var(--shadow-lg); text-decoration: none;
}
/* Botón flotante de WhatsApp: crece y su sombra se intensifica al pasar el cursor */
body.ms-base:not(#ms-x) .ms-fab {
transition: transform var(--duration-base) var(--ease-arrive), box-shadow var(--duration-base) var(--ease-standard);
}
body.ms-base:not(#ms-x) .ms-fab:hover, body.ms-base:not(#ms-x) .ms-fab:focus-visible {
transform: scale(1.08); box-shadow: var(--shadow-lg), 0 12px 28px -8px rgba(12, 31, 39, 0.45);
}
@media (prefers-reduced-motion: reduce) {
body.ms-base:not(#ms-x) .ms-fab {
transition: none;
}
body.ms-base:not(#ms-x) .ms-fab:hover, body.ms-base:not(#ms-x) .ms-fab:focus-visible {
transform: none;
}
}
body.ms-base:not(#ms-x) .ms-fab svg {
width: 26px; height: 26px;
}
body.ms-base:not(#ms-x) .ms-fab::after {
content: ""; position: absolute; top: 6px; right: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--spot); box-shadow: 0 0 0 2px var(--surface-deep);
}
@media (max-width: 1024px) {
body.ms-base:not(#ms-x) .ms-mbar {
display: flex;
}
body.ms-base:not(#ms-x) .ms-fab {
display: none;
}
}
body.ms-base:not(#ms-x) .ms-burger {
display: none;
}
@media (max-width: 859px) {
body.ms-base:not(#ms-x) .ms-burger {
display: inline-grid;
}
}
body.ms-base:not(#ms-x) .ms-mobile-menu {
border-top: 1px solid var(--line); background: var(--surface);
}
body.ms-base:not(#ms-x) .ms-mobile-menu nav {
display: flex; flex-direction: column; gap: var(--space-1); padding-block: var(--space-4) var(--space-5);
}
body.ms-base:not(#ms-x) .ms-mobile-menu a:not(.ms-btn) {
display: flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--line);
}
body.ms-base:not(#ms-x) .ms-bg-media {
position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
body.ms-base:not(#ms-x) .ms-bg-media > img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
body.ms-base:not(#ms-x) .ms-bg-media--fade::after {
content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, var(--bg));
}
body.ms-base:not(#ms-x) .ms-bg-media--scrim::after {
content: ""; position: absolute; inset: 0; background: var(--surface-deep); opacity: .62;
}
body.ms-base:not(#ms-x) .ms-panel {
position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(var(--space-5), 4vw, var(--space-7)); box-shadow: var(--shadow-lg);
}
body.ms-base:not(#ms-x) section[id], body.ms-base:not(#ms-x) [id].ms-card {
scroll-margin-top: calc(var(--nav-h, 72px) + var(--space-4));
}
body.ms-base:not(#ms-x) .ms-nav a:not(.ms-btn):not(.ms-nav__logo), body.ms-base:not(#ms-x) .ms-mobile-menu a:not(.ms-btn) {
color: var(--text);
}
body.ms-base:not(#ms-x) .ms-nav a:not(.ms-btn):not(.ms-nav__logo):hover, body.ms-base:not(#ms-x) .ms-mobile-menu a:not(.ms-btn):hover {
color: var(--cta);
}
@media (min-width: 900px) {
body.ms-base:not(#ms-x) .ms-hero .ms-split {
grid-template-columns: 1.5fr 1fr;
}
}
body.ms-base:not(#ms-x) .ms-hero .ms-display {
font-size: clamp(2.4rem, 1.2rem + 3.4vw, 3.75rem);
}