/* MAC is a full-width view inside the existing portfolio card. */
.mac-nav {
  display: none;
}

.mac-preview {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%;
}

.mac-preview > p:not(.eyebrow) {
  color: var(--muted);
  font-size: 12px;
}

.mac-detail[hidden],
.mac-nav[hidden],
.mac-mobile-links[hidden] {
  display: none !important;
}

.mac-detail:not([hidden]) {
  display: block;
}

body.mac-view {
  background: #031727;
  color: #f4f8fd;
}

body.ecosystem-view .site-header {
  padding: 0;
  background: #041421;
  border-bottom: 1px solid #729ac424;
}

body.ecosystem-view .nav-shell,
body.mac-view #contenido > :not(#soluciones),
body.mac-view #soluciones > :not(.product-grid),
body.mac-view .product-grid > :not(#mac),
body.mac-view > .site-footer,
body.mac-view .mac-preview {
  display: none !important;
}

body.mac-view #soluciones {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

body.mac-view .product-grid {
  display: block;
  margin: 0;
  padding: 0;
}

body.mac-view #mac {
  display: block !important;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #031727;
  box-shadow: none;
  overflow: visible;
  transform: none;
  scroll-margin-top: 0;
}

.mac-detail,
.mac-nav,
.mac-dialog {
  --mac-blue: #005bff;
  --mac-cyan: #38d9ff;
  --mac-muted: #b1c4d7;
  --mac-line: #8bc7f52b;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
}

.mac-detail *,
.mac-detail *::before,
.mac-detail *::after,
.mac-nav *,
.mac-dialog * {
  box-sizing: border-box;
}

.mac-detail :where(h1, h2, h3, p, ul, ol, dl, dd),
.mac-dialog :where(h2, h3, p, dl, dd) {
  margin: 0;
}

.mac-detail :is(h1, h2, h3),
.mac-dialog :is(h2, h3) {
  font-family: Manrope, sans-serif;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.16;
}

.mac-detail h2 {
  font-size: clamp(26px, 1.8vw, 32px);
}

.mac-detail h3 {
  margin: 0;
  font-size: 15px;
}

.mac-detail p,
.mac-dialog p {
  line-height: 1.5;
}

.mac-detail svg,
.mac-nav svg,
.mac-dialog svg {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.mac-detail img,
.mac-nav img {
  display: block;
  height: auto;
}

.mac-container,
body.ecosystem-view .mac-nav {
  width: min(1640px, calc(100% - 8.12vw));
  margin-inline: auto;
}

.mac-detail :is(section[id], h1[id]) {
  scroll-margin-top: 24px;
}

body.ecosystem-view .mac-nav:not([hidden]) {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 91px;
}

.mac-brand {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
}

.mac-brand img {
  width: clamp(145px, 11vw, 195px);
  height: auto;
}

.mac-nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(12px, 1.25vw, 23px);
  color: #d6e1ec;
  font-size: clamp(11px, 0.84vw, 14px);
  font-weight: 700;
}

.mac-nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  position: relative;
}

.mac-nav :is(.mac-nav-links, .mac-mobile-links) a[href="#mia"] { --mac-nav-accent: #76bc21; }
.mac-nav :is(.mac-nav-links, .mac-mobile-links) a[href="#crm"] { --mac-nav-accent: #00a198; }
.mac-nav :is(.mac-nav-links, .mac-mobile-links) a[href="#magda"] { --mac-nav-accent: #7465da; }
.mac-nav :is(.mac-nav-links, .mac-mobile-links) a[href="#madi"] { --mac-nav-accent: #f6bd34; }
.mac-nav :is(.mac-nav-links, .mac-mobile-links) a[href="#mat"] { --mac-nav-accent: #ac87f4; }
.mac-nav :is(.mac-nav-links, .mac-mobile-links) a[href="#bt-latina"] { --mac-nav-accent: #b791ff; }
.mac-nav :is(.mac-nav-links, .mac-mobile-links) a[href="#emprendedores"] { --mac-nav-accent: #6be1e8; }

.mac-nav-links a[aria-current="page"] {
  color: var(--mac-nav-accent, #38d9ff);
}

.mac-nav-links a[aria-current="page"]::after {
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 2px;
  background: var(--mac-nav-accent, #38d9ff);
  content: "";
}

.mac-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 40px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 5px;
  font: 700 12px/1.25 "DM Sans", sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.mac-button svg {
  width: 17px;
  height: 17px;
}

.mac-button-primary {
  color: #fff;
  background: #005bff;
  border-color: #1672ff;
  box-shadow: inset 0 1px 0 #ffffff26, 0 4px 18px #0077ff20;
}

.mac-button-outline {
  color: #f4f8fd;
  background: #071e3280;
  border-color: #6fb8f5;
}

.mac-button-light {
  color: #005bff;
  background: #ffffffb3;
  border-color: #005bff;
}

.mac-nav-demo {
  flex-shrink: 0;
  min-height: 36px;
  padding: 8px 17px;
  font-size: 11px;
}

.mac-menu-toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #729ac459;
  border-radius: 5px;
  background: transparent;
  color: #fff;
  font-size: 12px;
}

.mac-menu-toggle span {
  font-size: 22px;
}

.mac-mobile-links:not([hidden]) {
  position: absolute;
  z-index: 20;
  top: calc(100% - 1px);
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 70dvh;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid #729ac459;
  border-radius: 0 0 8px 8px;
  background: #061c2e;
  box-shadow: 0 20px 40px #0006;
}

.mac-mobile-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px;
  font-size: 12px;
}

.mac-mobile-links a[aria-current="page"] {
  color: var(--mac-nav-accent, #38d9ff);
}

/* The desktop height interpolation follows the two reference widths. */
.mac-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #04182a;
  border-bottom: 1px solid var(--mac-line);
}

.mac-hero::before {
  position: absolute;
  z-index: -2;
  inset: -5px;
  background: url("../assets/mac-suite/office.jpg") center 47% / cover no-repeat;
  filter: blur(2px);
  content: "";
}

.mac-hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse at 59% 86%, #005bff32, transparent 38%), linear-gradient(90deg, #001020f2 0%, #02162cba 42%, #04234299 65%, #001020cf), linear-gradient(0deg, #02172c 0%, transparent 35%, #03172735);
  content: "";
}

.mac-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 25fr) minmax(0, 33fr);
  grid-template-rows: auto auto auto;
  align-content: center;
  column-gap: 0;
  row-gap: 24px;
  min-height: clamp(590px, calc(61.377vw - 293.83px), 795px);
  padding-block: 36px;
}

.mac-hero-copy {
  grid-column: 1;
  grid-row: 1;
  padding-right: 24px;
  min-width: 0;
}

.mac-kicker {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  color: #38d9ff;
}

.mac-erp-badge {
  padding: 4px 9px;
  border: 1px solid #53a5e576;
  border-radius: 7px;
  color: #d2eaff;
  font-size: 8px;
  letter-spacing: 0.06em;
}

.mac-wordmark {
  width: clamp(350px, 24.3vw, 410px);
  max-width: 100%;
  margin-bottom: 24px;
}

.mac-wordmark img {
  width: 100%;
  aspect-ratio: 2000 / 550;
  object-fit: contain;
}

.mac-wordmark > span {
  display: block;
  width: min(300px, 100%);
  margin-top: 12px;
  padding: 4px 14px;
  border: 1px solid #2899ff;
  border-radius: 18px;
  background: #061d3899;
  color: #f2f7ff;
  box-shadow: inset 0 0 14px #006aff88, 0 0 14px #006aff77;
  font: 700 22px/1.15 Manrope, sans-serif;
  letter-spacing: 0.2em;
  text-align: center;
}

.mac-hero-copy h1 {
  font-size: clamp(40px, calc(1.198vw + 22.75px), 44px);
  line-height: 1.13;
  letter-spacing: -0.04em;
  text-wrap: pretty;
}

.mac-hero-copy .mac-description {
  max-width: 490px;
  margin-top: 17px;
  color: #f0f4fa;
  font-size: clamp(15px, 1.08vw, 18px);
  line-height: 1.4;
}

.mac-hero-actions {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.mac-hero-actions .mac-button {
  min-height: 44px;
  border-radius: 99px;
  padding-inline: 22px;
}

.mac-principles {
  grid-column: 1;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 520px;
  padding: 0 16px 0 0;
  list-style: none;
}

.mac-principles li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #c1d1e1;
  font-size: 10px;
  line-height: 1.35;
}

.mac-principles svg,
.mac-principles b {
  width: 22px;
  color: #16c9f5;
  font-size: 22px;
  font-weight: 400;
}

.mac-architecture {
  grid-column: 2;
  grid-row: 1 / 4;
  position: relative;
  align-self: center;
  height: 500px;
  min-width: 0;
  isolation: isolate;
}

.mac-architecture-glow {
  position: absolute;
  z-index: -1;
  inset: -3% -15% -7%;
  background: radial-gradient(ellipse at 48% 45%, #008fff46, #006bff18 55%, transparent 74%);
}

.mac-architecture-depth { position: absolute; inset: 0; transform-origin: 50% 55%; transition: transform 320ms cubic-bezier(.22, 1, .36, 1); }
.mac-architecture:not(.is-motion-active) .mac-architecture-depth { transition: none; }
.mac-core-float {
  position: absolute;
  z-index: 5;
  top: 3px;
  left: 50%;
  width: 178px;
  height: 178px;
  translate: -50% 0;
}
.mac-core-tile {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 1px solid #35c9ff;
  border-radius: 30px;
  background: linear-gradient(145deg, #001c56 0%, #00112f 52%, #002750 100%);
  box-shadow: -7px 2px 0 #03499775, 0 0 20px #008dff8a, 0 12px 38px #006aff55, inset 0 0 21px #006dff55;
  transform: perspective(1000px) rotateY(-4deg) rotateX(1deg);
  transition: border-color 260ms ease, box-shadow 260ms ease;
}

/* Original negative logo, supplied for dark backgrounds. */
.mac-core-tile img {
  width: 64%;
  height: auto;
  max-width: none;
  object-fit: contain;
}
.mac-core-tile::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64%;
  aspect-ratio: 420 / 220;
  transform: translate(-50%, -50%);
  background: var(--connection-color, #38d9ff);
  mask: url("../assets/mac-suite/mac-symbol-white.png") center / contain no-repeat;
  mix-blend-mode: multiply;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, background-color 260ms ease;
  content: "";
}
.mac-architecture.is-app-connected .mac-core-tile::after { opacity: 1; }

.mac-layers {
  position: absolute;
  top: 214px;
  left: calc(50% - 10px);
  width: min(282px, calc(100% - 52px));
  transform: translateX(-50%);
}

.mac-layer {
  position: relative;
  width: 100%;
  height: 72px;
}
.mac-layer-plate {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  width: 100%;
  height: 64px;
  border: 1px solid #63d5ffb8;
  border-top-color: #b2efff;
  border-radius: 10px;
  background: linear-gradient(105deg, #158eff99, #044fb5c9 17%, #001e54eb 60%, #0276bd9e);
  box-shadow: 0 10px 20px #0032a044, inset 0 1px 14px #50c7ff50, inset 0 -8px 18px #003d8340;
  transform: skewY(-3deg);
  transition: transform 300ms cubic-bezier(.22, 1, .36, 1), border-color 250ms ease, box-shadow 300ms ease;
}

/* Flat top and side faces form a rectangular tray, never an ellipse. */
.mac-layer-plate::before {
  position: absolute;
  inset: -27px -1px auto;
  height: 27px;
  border: 1px solid #83e8ffba;
  border-radius: 8px 10px 0 0;
  background: linear-gradient(110deg, #58d9ff88, #1267cf88 45%, #31b8f69e);
  transform: skewX(-42deg);
  transform-origin: 50% 100%;
  content: "";
  z-index: -1;
}
.mac-layer-plate::after {
  position: absolute;
  top: -1px;
  bottom: -1px;
  right: -25px;
  width: 25px;
  border: 1px solid #72dfff8a;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(90deg, #0586cba8, #219add50);
  transform: skewY(-47deg);
  transform-origin: 0 0;
  content: "";
  z-index: -1;
}

.mac-layer:nth-child(1) { z-index: 4; }
.mac-layer:nth-child(2) { z-index: 3; left: 3px; }
.mac-layer:nth-child(3) { z-index: 2; }
.mac-layer:nth-child(4) { z-index: 1; left: 2px; }
.mac-layer:nth-child(n+3) .mac-layer-plate { border-left-color: #c9b4ff; background: linear-gradient(105deg, #b391e77a, #1845a6ba 15%, #001e54eb 58%, #0276bd9e); }
.mac-layer:nth-child(3) svg { color: #bca2ff; }
.mac-layer:nth-child(4) svg { color: #d5c7ff; }

.mac-layer-plate > span {
  display: flex;
  align-items: center;
  width: calc(100% - 26px);
  height: 100%;
  margin-left: 26px;
  padding: 8px 14px;
  border-left: 1px solid #7bd8ff85;
  border-radius: 9px;
  background: linear-gradient(100deg, #003a92a8, #001e5380 65%, transparent);
  gap: 14px;
  color: #fff;
  font: 600 17px/1.2 "DM Sans", sans-serif;
}

.mac-layer svg {
  width: 31px;
  height: 31px;
  color: #b4e2ff;
}

.mac-hero-apps {
  grid-column: 3;
  grid-row: 1 / 4;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 20px 18px;
  align-self: center;
  min-width: 0;
  height: 500px;
  padding-left: 12px;
}

.mac-hero-apps .mac-direction {
  grid-column: 2;
  grid-row: 1;
  padding-top: 6px;
  padding-left: 15px;
  border-left: 2px solid #38d9ff;
  color: #e8f2fc;
  font: 500 clamp(11px, 0.85vw, 15px)/1.4 "DM Sans", sans-serif;
  letter-spacing: 0.015em;
}

.mac-direction strong {
  display: inline-block;
  margin-top: 5px;
  color: #fff;
  font-weight: 800;
}

.mac-app-list {
  grid-column: 1;
  grid-row: 1 / 3;
  display: grid;
  align-self: start;
  gap: 4px;
  min-width: 0;
}

.mac-app-card,
.mac-orbit-app {
  --app-color: #68b7ff;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #f4f8fd;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.mac-app-card {
  position: relative;
  min-height: 57px;
  padding: 6px 9px;
  border: 1px solid #6bacda4d;
  border-radius: 9px;
  background: linear-gradient(115deg, #071827f5, #101f31f5 70%, #061422);
  box-shadow: 0 5px 12px #00000040, inset 0 1px 0 #c6eaff0f;
  transition: transform 280ms cubic-bezier(.22, 1, .36, 1), border-color 220ms ease, box-shadow 280ms ease, background-color 220ms ease;
}
/* Keep the pointer hit area stable during the horizontal hover movement. */
.mac-app-card::before { position: absolute; inset: 0 0 0 -8px; content: ""; }
.mac-app-card .mac-app-icon { flex-basis: 39px; width: 39px; height: 39px; background: linear-gradient(145deg, #031225, #062847); border-color: #3bb0e74a; box-shadow: inset 0 0 12px #00102599, 0 2px 5px #0004; }
.mac-app-card .mac-app-icon svg { width: 29px; height: 29px; }
.mac-app-card .mac-app-icon { transition: filter 220ms ease, border-color 220ms ease; }
.mac-detail .mac-app-card .mac-app-icon:has(img) { background: linear-gradient(145deg, #031225, #062847); }

.mac-app-card[data-app="mia"], .mac-orbit-app[data-app="mia"] { --app-color: #76bc21; }
.mac-app-card[data-app="crm"], .mac-orbit-app[data-app="crm"] { --app-color: #00a198; }
.mac-app-card[data-app="magda"], .mac-orbit-app[data-app="magda"] { --app-color: #7465da; }
.mac-app-card[data-app="madi"], .mac-orbit-app[data-app="madi"] { --app-color: #f6bd34; }
.mac-app-card[data-app="mat"], .mac-orbit-app[data-app="mat"] { --app-color: #ac87f4; }
.mac-app-card[data-app="maui"], .mac-orbit-app[data-app="maui"] { --app-color: #64dbf8; }
.mac-app-card[data-app="bt-latina"], .mac-orbit-app[data-app="bt-latina"] { --app-color: #b791ff; }
.mac-app-card[data-app="emprendedores"], .mac-orbit-app[data-app="emprendedores"] { --app-color: #6be1e8; }

.mac-app-icon {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 1px solid #83b7e32b;
  border-radius: 7px;
  background: #102b49;
  color: var(--app-color);
}

.mac-app-icon svg {
  width: 25px;
  height: 25px;
}

.mac-detail .mac-app-icon:has(img) { padding: 4px; background: transparent; }
.mac-app-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mac-app-monogram { font: 700 10px/1 Manrope, sans-serif; letter-spacing: -.03em; }
.mac-app-card.is-connected { border-color: var(--app-color); }
.mac-orbit-app.is-connected { border-color: var(--app-color); }

.mac-app-label {
  display: block;
  min-width: 0;
}

.mac-app-label strong {
  display: block;
  font: 700 12px/1.2 Manrope, sans-serif;
  letter-spacing: 0.015em;
  overflow-wrap: anywhere;
}

.mac-app-label small {
  display: block;
  margin-top: 3px;
  color: #b6c8dc;
  font-size: 9px;
  line-height: 1.25;
}

.mac-detail .mac-handwriting {
  font-family: "Segoe Script", "Brush Script MT", cursive;
  font-size: clamp(23px, 1.8vw, 32px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.055em;
  color: #d2e5f7;
  transform: rotate(-7deg);
}

.mac-hero-note {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  padding-bottom: 20px;
}

.mac-overview {
  background: radial-gradient(ellipse at 80% 30%, #07365599, transparent 70%), #031727;
  border-bottom: 1px solid var(--mac-line);
  padding-top: 12px;
}

.mac-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  align-items: center;
  min-height: clamp(315px, calc(19.461vw + 34.76px), 380px);
  padding-block: 14px;
}

.mac-detail .mac-eyebrow {
  margin-bottom: 9px;
  color: #38d9ff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.12em;
}

.mac-overview-copy {
  padding-right: clamp(30px, 4vw, 70px);
}

.mac-overview-copy > p:not(.mac-eyebrow) {
  max-width: 520px;
  margin-top: 14px;
  color: #edf3fa;
  font-size: 15px;
  line-height: 1.4;
}

.mac-indicators {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 23px;
  padding-top: 15px;
  border-top: 0;
}

.mac-indicators > div + div {
  border-left: 1px solid #38d9ff40;
  padding-left: 12px;
}

.mac-indicators dt {
  color: #4ed1ff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.mac-indicators dd {
  margin-top: 5px;
  color: #eef6ff;
  font-size: 14px;
  font-weight: 700;
}

.mac-ecosystem-art {
  min-width: 0;
}

.mac-ecosystem-art > .mac-eyebrow {
  position: relative;
  z-index: 2;
  margin-bottom: 0;
  text-align: center;
}

.mac-ecosystem-scene {
  position: relative;
  height: clamp(265px, calc(22.455vw - 58.35px), 340px);
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 62%, #0b4d763b, transparent 65%);
}

.mac-connections {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  fill: none;
  stroke: #3c8cca;
  stroke-width: 1;
  pointer-events: none;
  overflow: visible;
}

.mac-connections ellipse {
  opacity: 0.24;
}

.mac-connection { stroke-dasharray: 2 5; opacity: .35; transition: opacity 200ms ease, stroke 200ms ease; }
.mac-connection-signal { stroke: currentColor; stroke-width: 2; stroke-dasharray: 8 24; opacity: 0; filter: drop-shadow(0 0 4px currentColor); }
.mac-connections .is-connected .mac-connection { stroke: currentColor; opacity: .85; }
.mac-connections .is-connected .mac-connection-signal { opacity: 1; animation: mac-connection-flow 1.5s linear infinite; animation-play-state: paused; }
.mac-ecosystem-scene.is-wire-motion-active .is-connected .mac-connection-signal { animation-play-state: running; }
@keyframes mac-connection-flow { to { stroke-dashoffset: -32; } }

.mac-city {
  position: absolute;
  z-index: -2;
  inset: 15% 8% 14%;
  display: flex;
  align-items: end;
  justify-content: space-around;
  gap: 14px;
  opacity: 0.3;
  mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent);
}

.mac-city i {
  width: 10%;
  height: 60%;
  border: 1px solid #2b669c;
  background: repeating-linear-gradient(0deg, transparent 0 16px, #428bcf2e 17px 18px), linear-gradient(90deg, #102c48, #1a4c79 65%, #071b2f 66%);
  transform: skewY(-8deg);
}

.mac-city i:nth-child(2n) { height: 85%; }
.mac-city i:nth-child(3n) { height: 45%; }
.mac-city i:nth-child(4) { height: 100%; }

.mac-ecosystem-core {
  position: absolute;
  top: 55%;
  left: 48%;
  display: flex;
  align-items: center;
  flex-direction: column;
  transform: translate(-50%, -50%);
  text-align: center;
}

.mac-ecosystem-core > div {
  display: grid;
  place-items: center;
  width: clamp(120px, 8.5vw, 150px);
  height: clamp(120px, 8.5vw, 150px);
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  aspect-ratio: 1;
  border: 1px solid #53b6fa;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 25%, #164c76, #07243d 70%);
  box-shadow: 0 0 0 7px #218bca0c, 0 0 0 15px #218bca08, 0 0 35px #138fe32b, inset 0 0 20px #58b8f526;
  transition: box-shadow 200ms ease, border-color 200ms ease;
}

.mac-ecosystem-core.is-connected > div { border-color: #94e7ff; box-shadow: 0 0 0 7px #218bca16, 0 0 32px #168cff80, 0 0 55px var(--connection-color, #38d9ff), inset 0 0 24px #58b8f54d; }
.mac-ecosystem-core.is-connected img { filter: drop-shadow(0 0 9px #5098e980); }
.mac-core-tile.is-connected { box-shadow: -7px 2px 0 #03499775, 0 0 28px #008dffad, 0 12px 44px #006aff70, inset 0 0 26px #007fff65; }
.mac-architecture.is-app-connected .mac-architecture-glow {
  background: radial-gradient(ellipse at 48% 45%, color-mix(in srgb, var(--connection-color) 30%, transparent), color-mix(in srgb, var(--connection-color) 12%, transparent) 55%, transparent 74%);
}
.mac-architecture.is-app-connected .mac-core-tile {
  border-color: color-mix(in srgb, var(--connection-color) 70%, white);
  background: linear-gradient(145deg, color-mix(in srgb, var(--connection-color) 30%, #00112f), #00112f 55%, color-mix(in srgb, var(--connection-color) 20%, #00112f));
  box-shadow: -7px 2px 0 color-mix(in srgb, var(--connection-color) 30%, #00112f), 0 0 28px color-mix(in srgb, var(--connection-color) 60%, transparent), 0 12px 44px color-mix(in srgb, var(--connection-color) 35%, transparent), inset 0 0 26px color-mix(in srgb, var(--connection-color) 25%, transparent);
}
.mac-architecture.is-app-connected .mac-layer-plate {
  border-color: color-mix(in srgb, var(--connection-color) 65%, white);
  background: linear-gradient(105deg, color-mix(in srgb, var(--connection-color) 60%, #00112f), color-mix(in srgb, var(--connection-color) 28%, #00112f) 20%, #00152fe8 60%, color-mix(in srgb, var(--connection-color) 50%, #00112f));
  box-shadow: 0 10px 20px color-mix(in srgb, var(--connection-color) 25%, transparent), inset 0 1px 14px color-mix(in srgb, var(--connection-color) 35%, transparent);
}
.mac-architecture.is-app-connected .mac-layer-plate::before {
  border-color: color-mix(in srgb, var(--connection-color) 60%, white);
  background: linear-gradient(110deg, color-mix(in srgb, var(--connection-color) 65%, transparent), color-mix(in srgb, var(--connection-color) 30%, #002650) 45%, color-mix(in srgb, var(--connection-color) 75%, transparent));
}
.mac-architecture.is-app-connected .mac-layer-plate::after {
  border-color: color-mix(in srgb, var(--connection-color) 50%, white);
  background: linear-gradient(90deg, color-mix(in srgb, var(--connection-color) 55%, #00112f), color-mix(in srgb, var(--connection-color) 35%, transparent));
}
.mac-architecture.is-app-connected .mac-layer-plate > span {
  border-color: color-mix(in srgb, var(--connection-color) 50%, white);
  background: linear-gradient(100deg, color-mix(in srgb, var(--connection-color) 22%, #00112f), #00152f80 65%, transparent);
}
.mac-architecture.is-app-connected .mac-layer svg { color: color-mix(in srgb, var(--connection-color) 35%, white); }
.mac-architecture.is-app-connected .mac-layer:last-child .mac-layer-plate {
  box-shadow: 0 0 22px color-mix(in srgb, var(--connection-color) 35%, transparent), inset 0 0 20px color-mix(in srgb, var(--connection-color) 30%, transparent);
}

.mac-ecosystem-core img {
  width: 130%;
  max-width: none;
  transform: translateY(-5%);
}

.mac-ecosystem-core > strong {
  margin-top: 9px;
  font: 700 20px/1.2 Manrope, sans-serif;
  letter-spacing: 0.08em;
}

.mac-ecosystem-core > span {
  margin-top: 3px;
  color: #adcae2;
  font-size: 13px;
}

.mac-ecosystem-apps {
  position: absolute;
  inset: 0;
}

.mac-orbit-app {
  position: absolute;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 110px;
  min-height: 62px;
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 8px;
  transform: translateX(-50%);
  text-align: center;
}

.mac-orbit-app .mac-app-icon {
  flex-basis: 42px;
  width: 46px;
  height: 42px;
  background: #0b223a;
  border-color: #669acc57;
  box-shadow: 0 4px 14px #0004;
}

.mac-orbit-app .mac-app-icon svg { width: 33px; height: 33px; }
.mac-orbit-app .mac-app-label strong { font-size: 12px; }
.mac-orbit-app .mac-app-label small { font-size: 10px; margin-top: 2px; }
.mac-orbit-app[data-app="mia"] { left: 26%; top: 6%; }
.mac-orbit-app[data-app="crm"] { left: 45%; top: 2%; }
.mac-orbit-app[data-app="magda"] { left: 66%; top: 4%; }
.mac-orbit-app[data-app="madi"] { left: 84%; top: 20%; }
.mac-orbit-app[data-app="mat"] { left: 86%; top: 55%; }
.mac-orbit-app[data-app="maui"] { left: 67%; top: 78%; }
.mac-orbit-app[data-app="bt-latina"] { left: 20%; top: 72%; }
.mac-orbit-app[data-app="emprendedores"] { left: 9%; top: 36%; }

.mac-detail .mac-ecosystem-note {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: clamp(16px, 1.2vw, 21px);
  pointer-events: none;
}

.mac-operation {
  display: flex;
  align-items: center;
  min-height: clamp(205px, calc(5.988vw + 118.77px), 225px);
  padding-block: 28px;
  background: transparent;
  border: 0;
}

.mac-operation-heading {
  display: grid;
  grid-template-columns: 35% 1fr;
  align-items: center;
  gap: 35px;
  margin-bottom: 20px;
}

.mac-operation-heading h2 {
  font-size: clamp(22px, 1.55vw, 27px);
}

.mac-operation-heading h2 br {
  display: initial;
}

.mac-operation-heading > p {
  max-width: 610px;
  color: #edf4fb;
  font-size: 13px;
}

.mac-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 38px;
  padding: 0;
  list-style: none;
}

.mac-steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.mac-steps li:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: -26px;
  width: 10px;
  height: 10px;
  border-top: 2px solid #38d9ff;
  border-right: 2px solid #38d9ff;
  transform: translateY(-50%) rotate(45deg);
  content: "";
}

.mac-step-icon {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  border: 1px solid #4c9fda;
  border-radius: 50%;
  background: radial-gradient(circle at 55% 40%, #073363, #001225 70%);
  color: #8dc8ff;
  box-shadow: 0 0 14px #008cff40, inset 0 0 14px #56adfa28;
}
.mac-step-icon::after { position: absolute; inset: -6px; border: 1px solid #65dfff; border-radius: 50%; box-shadow: 0 0 14px #08b9ff55; opacity: 0; pointer-events: none; content: ""; }
.mac-step-icon, .mac-step-icon svg { transition: transform 240ms cubic-bezier(.22, 1, .36, 1), border-color 220ms ease, box-shadow 220ms ease; }
.mac-steps li:nth-child(1) { --step-delay: 0ms; }
.mac-steps li:nth-child(2) { --step-delay: 140ms; }
.mac-steps li:nth-child(3) { --step-delay: 280ms; }
.mac-steps li:nth-child(4) { --step-delay: 420ms; }
.mac-step-entered .mac-step-icon::after { animation: mac-step-pulse 850ms var(--step-delay) ease-out both; }
.mac-steps li.mac-step-entered:not(:last-child)::after { animation: mac-step-connector 450ms var(--step-delay) ease-out both; }
@keyframes mac-step-pulse { 0% { opacity: 0; transform: scale(.88); } 35% { opacity: .75; } 100% { opacity: 0; transform: scale(1.15); } }
@keyframes mac-step-connector { from { opacity: .2; scale: .8; } to { opacity: 1; scale: 1; } }

.mac-step-icon svg { width: 29px; height: 29px; }
.mac-steps li > div > span { color: #6edfff; font-size: 12px; }
.mac-steps h3 { margin: 2px 0 5px; font-size: 17px; }
.mac-steps p { max-width: 245px; color: #edf3fa; font-size: 12px; line-height: 1.4; }

.mac-demo-section {
  display: flex;
  align-items: center;
  min-height: 360px;
  padding-block: 21px;
  color: #0b104b;
  background: linear-gradient(110deg, #f9fbff, #edf6ff);
  color-scheme: light;
}

.mac-demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  align-items: center;
}

.mac-demo-copy {
  padding-right: clamp(25px, 4vw, 70px);
}

.mac-demo-section .mac-eyebrow,
.mac-benefits .mac-eyebrow {
  color: #005bff;
}

.mac-demo-copy > p:not(.mac-eyebrow) {
  max-width: 480px;
  margin-top: 13px;
  color: #45527e;
  font-size: 16px;
}
.mac-demo-copy > p.mac-demo-access-note { margin-top: 10px; color: #52657d; font-size: 11px; line-height: 1.4; }

.mac-area-selector {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-block: 20px 17px;
}

.mac-area-selector button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  gap: 8px;
  min-width: 0;
  min-height: 78px;
  padding: 8px 3px;
  border: 1px solid #dce9ff;
  border-radius: 9px;
  background: #ffffffb3;
  color: #0b104b;
  box-shadow: 0 5px 15px #2676ff08;
  font: 600 10px/1.3 "DM Sans", sans-serif;
  text-align: center;
  cursor: pointer;
}

.mac-area-selector button[aria-pressed="true"] {
  border-color: #006aff;
  background: #005bff;
  color: #fff;
  box-shadow: 0 5px 15px #006aff26;
}

.mac-area-selector svg { width: 30px; height: 30px; color: #0071ff; }
.mac-area-selector button[data-mac-area="finance"] svg,
.mac-area-selector button[data-mac-area="inventory"] svg { color: #00ad94; }
.mac-area-selector button[data-mac-area="information"] svg { color: #8656ff; }
.mac-area-selector button[aria-pressed="true"] svg { color: #fff; }
.mac-mockup-area { position: relative; min-width: 0; }

.mac-screen {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  min-height: 410px;
  overflow: hidden;
  border: 3px solid #303540;
  border-radius: 12px;
  background: #f7f8fc;
  box-shadow: 0 12px 25px #19385421, 0 2px 4px #19385417;
  font-size: 9px;
  line-height: 1.35;
  font-family: "Segoe UI", sans-serif;
}
.mac-screen[data-sidebar-expanded="true"] { grid-template-columns: 116px minmax(0, 1fr); }

.mac-screen-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 10px;
  background: linear-gradient(135deg, #303540 0 95px, #25282e 96px);
  color: #f5f5f6;
}

#mac-screen-menu {
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
}
#mac-screen-menu img { width: 44px; height: 44px; object-fit: contain; }
.mac-screen-modules { display: flex; flex-direction: column; width: 100%; margin-block: 34px auto; padding-bottom: 15px; }
.mac-screen-modules > span {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 5px;
  font-size: 8px;
}
.mac-screen-modules > span > span { display: none; }
.mac-screen[data-sidebar-expanded="true"] .mac-screen-modules > span { justify-content: start; padding-inline: 14px; }
.mac-screen[data-sidebar-expanded="true"] .mac-screen-modules > span > span { display: inline; }
.mac-screen-sidebar svg { width: 16px; height: 16px; }
.mac-screen svg[viewBox="0 0 24 24"] { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mac-screen-modules > .is-active { background: #ffffff0d; box-shadow: inset 2px 0 #5098e9; }
.mac-screen-avatar { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid #ffffff55; border-radius: 50%; background: #656c75; color: #fff; font-size: 10px; }
.mac-screen-main { min-width: 0; }

.mac-screen-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 29px;
  padding: 4px 9px;
  border-bottom: 1px solid #ebebee;
  background: #fff;
  color: #53585f;
  font-size: 8px;
}
.mac-screen-utilities { display: flex; align-items: center; gap: 9px; }
.mac-screen-utilities svg { width: 12px; height: 12px; }
.mac-screen-center { min-width: 60px; border: 1px solid #dedee2; border-radius: 3px; padding: 2px 5px; font-size: 7px; }

.mac-screen-content { padding: 10px; min-width: 0; background: #e5e6ea; margin: 10px; border-radius: 12px; }

.mac-screen-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 70px;
  margin-bottom: 9px;
  padding: 12px;
  border-radius: 9px;
  background: linear-gradient(135deg, #303540 0 32%, #25282e 32%);
  color: #fff;
}
.mac-screen-heading { flex: 1 1 200px; min-width: 0; }
.mac-screen-heading > span { display: block; margin-bottom: 4px; color: #c5c9d0; font-size: 7px; font-weight: 700; letter-spacing: .04em; }

.mac-screen-toolbar h3 {
  margin: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.mac-screen-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.mac-screen-actions :is(button, a) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 27px;
  padding: 4px 7px;
  border: 1px solid #7e8289;
  border-radius: 99px;
  background: #51555c;
  color: #fff;
  font: 700 8px/1.2 "Segoe UI", sans-serif;
}
.mac-screen-actions button:disabled { color: #bfc2c9; border-color: #62666e; cursor: not-allowed; }
.mac-screen-actions .mac-screen-new { background: #fff; color: #25282e; border-color: #fff; }
.mac-screen-actions :is(button, a):not(:disabled):hover { background: #69717d; color: #fff; }
.mac-screen-data { padding: 5px; border-radius: 8px; background: #fff; }
.mac-screen-search { display: block; }
.mac-screen-search input {
  width: 100%;
  min-height: 32px;
  padding: 6px;
  border: 0;
  border-radius: 4px;
  background: #fff;
  color: #3c4149;
  font: 10px "Segoe UI", sans-serif;
}
.mac-screen-search input:focus-visible { outline: 2px solid #5098e9; outline-offset: -2px; }
.mac-screen-search input::placeholder { color: #616871; }

.mac-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 0;
  border-radius: 0;
  background: #f7f8fa;
  scrollbar-width: thin;
  scrollbar-color: #babcc3 #f2f3f6;
}

.mac-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: separate;
  border-spacing: 3px;
  color: #565960;
  font-size: 9px;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.mac-table th,
.mac-table td {
  height: 33px;
  padding: 6px;
  vertical-align: top;
  white-space: normal;
}

.mac-table th { background: #25282e; color: #fff; font-weight: 800; line-height: 1.25; }
.mac-table td { height: 43px; border: 1px solid #eeeeF1; border-radius: 3px; background: #fff; font-size: 8px; }
.mac-table td:first-child { white-space: nowrap; }
.mac-record-link { padding: 0; border: 0; background: transparent; color: #326490; font: inherit; }
.mac-record-link:hover { text-decoration: underline; }
.mac-record-status { text-transform: uppercase; }
.mac-table .mac-table-empty { height: 215px; vertical-align: middle; text-align: center; }
.mac-screen-pagination { display: flex; justify-content: space-between; gap: 10px; padding: 7px 4px 3px; color: #477fab; font-size: 8px; }
.mac-screen-pagination b { padding: 3px 6px; background: #25282e; color: #fff; font-weight: 500; }
.mac-screen-content .mac-screen-disclaimer { margin-top: 7px; color: #545b65; font-size: 8px; }

.mac-interface-note {
  position: absolute;
  right: -10px;
  bottom: -12px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding: 13px 16px;
  border-radius: 14px;
  background: #d1eaff;
  box-shadow: 0 8px 25px #00599d1a;
  color: #0c2558;
  font-size: 10px;
}

.mac-interface-note svg { width: 24px; height: 24px; color: #006aff; }

.mac-benefits {
  display: flex;
  align-items: center;
  min-height: clamp(200px, calc(8.982vw + 70.66px), 230px);
  padding-block: 21px;
  background: #fff;
  color: #0b104b;
  color-scheme: light;
  border-top: 1px solid #d7e3ef;
}

.mac-benefits h2 { font-size: clamp(24px, 1.7vw, 30px); }

.mac-benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.mac-benefit {
  --benefit-accent: #009eea;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 87px;
  padding: 15px;
  border: 1px solid #d7e1ee;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 10px #203e6010;
  transition: transform 240ms cubic-bezier(.22, 1, .36, 1), box-shadow 240ms ease, border-color 220ms ease;
}
.mac-benefit:nth-child(2) { --benefit-accent: #00b9d8; }
.mac-benefit:nth-child(3) { --benefit-accent: #006aff; }
.mac-benefit:nth-child(4) { --benefit-accent: #00a990; }
.mac-benefit::before { position: absolute; inset: auto 0 0; height: 3px; background: var(--benefit-accent); transform: scaleX(0); transform-origin: left; transition: transform 260ms cubic-bezier(.22, 1, .36, 1); content: ""; }
.mac-benefit::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(120deg, color-mix(in srgb, var(--benefit-accent) 7%, white), white 75%); opacity: 0; transition: opacity 220ms ease; content: ""; }
.mac-benefit > svg { transition: transform 240ms cubic-bezier(.22, 1, .36, 1); }

@media (hover: hover) and (pointer: fine) {
  .mac-steps li:hover .mac-step-icon { border-color: #8de7ff; box-shadow: 0 0 20px #008cff50, inset 0 0 16px #56adfa2b; }
  .mac-benefit:hover { border-color: color-mix(in srgb, var(--benefit-accent) 35%, white); box-shadow: 0 12px 26px #163a6714; }
  .mac-benefit:hover::before { transform: scaleX(1); }
  .mac-benefit:hover::after { opacity: 1; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .mac-steps li:hover .mac-step-icon svg { transform: translateY(-2px) scale(1.06); }
  .mac-benefit:hover { transform: translateY(-4px); }
  .mac-benefit:hover > svg { transform: translateY(-2px); }
}

.mac-benefit > svg { width: 44px; height: 44px; padding: 7px; border-radius: 10px; background: #edf7ff; color: #009eea; }
.mac-benefit:nth-child(2) > svg { background: #e7fbfa; color: #00b9d8; }
.mac-benefit:nth-child(3) > svg { color: #006aff; }
.mac-benefit:nth-child(4) > svg { background: #e5fbf5; color: #00a990; }
.mac-benefit h3 { margin: 0 0 6px; font-size: 15px; letter-spacing: -0.025em; }
.mac-benefit p { color: #45527e; font-size: 12px; line-height: 1.4; }

.mac-closing {
  position: relative;
  isolation: isolate;
  background: #061a2c url("../assets/mac-suite/mountain.jpg") center 48% / cover no-repeat;
}

.mac-closing::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, #041829f5 0%, #08223be3 50%, #0a2946a3), linear-gradient(0deg, #031421ed, transparent 70%);
  content: "";
}

.mac-closing-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  align-items: center;
  gap: 35px;
  min-height: clamp(170px, calc(329.34px - 8.982vw), 200px);
  padding-block: 20px;
}

.mac-closing h2 { font-size: clamp(21px, 1.5vw, 26px); }
.mac-closing-grid > div > p { margin-top: 10px; color: #bbcede; font-size: 11px; line-height: 1.45; }
.mac-closing-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 15px; }
.mac-closing-actions .mac-button { min-height: 36px; padding: 8px 17px; font-size: 11px; }
.mac-closing-grid > .mac-handwriting { justify-self: center; font-size: clamp(29px, 2.5vw, 44px); }

.mac-footer {
  min-height: 60px;
  border-top: 1px solid #8bc7f524;
  background: #03142166;
}

.mac-footer > .mac-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 60px;
  padding-block: 10px;
}

.mac-footer .mac-brand img { width: 133px; }
.mac-footer p { color: #a9bfd2; font-size: 8px; letter-spacing: 0.1em; }
.mac-footer b { margin-inline: 10px; color: #6da9dd; font-weight: 400; }

/* Native dialogs retain their closed state and scroll independently. */
.mac-dialog {
  position: fixed;
  inset: 0;
  width: min(680px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #bdccdd;
  border-radius: 12px;
  background: #f5f8fc;
  color: #183652;
  color-scheme: light;
  box-shadow: 0 25px 100px #0006;
}

.mac-dialog:not([open]) { display: none; }
.mac-dialog::backdrop { background: #00101fcc; backdrop-filter: blur(4px); }

.mac-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  border-bottom: 1px solid #d6e1ed;
  background: #fff;
}

.mac-dialog-header h2 { font-size: 22px; }
.mac-dialog-header button { display: grid; place-items: center; flex-shrink: 0; min-width: 64px; min-height: 44px; padding: 8px; border: 1px solid #c9d6e5; border-radius: 6px; background: #f3f7fb; color: #264c70; font-size: 12px; cursor: pointer; }
.mac-dialog-body { padding: 24px; }
.mac-dialog-body > * + * { margin-top: 18px; }
.mac-dialog .mac-eyebrow { color: #4c7294; font-size: 10px; font-weight: 700; letter-spacing: 0.09em; }
.mac-tour-record { padding: 18px; border: 1px solid #bfcee0; border-radius: 8px; background: #fff; }
.mac-tour-record h3 { margin-bottom: 14px; font-size: 17px; }
.mac-tour-record dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 22px; }
.mac-tour-record dt { color: #607a92; font-size: 11px; }
.mac-tour-record dd { margin-top: 3px; color: #163c60; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.mac-tour-record > p { margin-top: 12px; color: #526d85; font-size: 12px; }
.mac-dialog .mac-button-outline { color: #23527e; border-color: #9ebbd6; background: #fff; }
.mac-request-note { padding: 14px 16px; border-left: 3px solid #3a85ca; border-radius: 3px; background: #e5eef8; color: #3d5a74; font-size: 13px; }
  .mac-button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.mac-detail :is(a, button, [tabindex]):focus-visible,
.mac-nav :is(a, button):focus-visible,
.mac-dialog :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid #49b7ff;
  outline-offset: 4px;
}

.mac-demo-section :is(button, [tabindex]):focus-visible,
.mac-dialog :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline-color: #145fac;
}

.mac-table-scroll:focus-visible { outline-offset: -3px; }

@media (hover: hover) and (pointer: fine) {
  .mac-app-card:hover .mac-app-icon { border-color: var(--app-color); filter: drop-shadow(0 0 4px var(--app-color)); }
  .mac-button-primary:hover { background: #0968d3; border-color: #87c6ff; }
  .mac-button-outline:hover { background: #184971; border-color: #a3dcff; }
  .mac-button-light:hover { background: #e1edff; }
  .mac-button:not(:disabled):active { transform: translateY(1px); }
  .mac-app-card:hover { border-color: var(--app-color); background: linear-gradient(115deg, #09223a, #102b45 70%, #071827); transform: translateX(6px); box-shadow: 0 5px 16px #0005, 0 0 15px color-mix(in srgb, var(--app-color) 20%, transparent); }
  .mac-orbit-app:hover { border-color: var(--app-color); background: #0b2945; }
  .mac-nav-links a:hover, .mac-mobile-links a:hover { color: var(--mac-nav-accent, #38d9ff); }
  .mac-area-selector button:hover { border-color: #91bce5; background: #e1edf9; }
  .mac-area-selector button[aria-pressed="true"]:hover { background: #004ee0; }
  .mac-dialog .mac-button-outline:hover, .mac-dialog-header button:hover { background: #e1edf9; }
}

@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
  .mac-core-float { animation: mac-core-idle 5.6s ease-in-out infinite; animation-play-state: paused; }
  .mac-layer-plate { animation: mac-plate-idle 6s ease-in-out infinite; animation-play-state: paused; }
  .mac-layer:nth-child(1) .mac-layer-plate { --plate-drift: 2px; }
  .mac-layer:nth-child(2) .mac-layer-plate { --plate-drift: -2px; animation-delay: -.8s; }
  .mac-layer:nth-child(3) .mac-layer-plate { --plate-drift: 1px; animation-delay: -1.6s; }
  .mac-layer:nth-child(4) .mac-layer-plate { --plate-drift: -1px; animation-delay: -2.4s; }
  .mac-architecture.is-motion-active .mac-core-float,
  .mac-architecture.is-motion-active .mac-layer-plate { animation-play-state: running; }
}
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .mac-layer:hover .mac-layer-plate { transform: skewY(-3deg) translateY(-4px); border-color: #c1f3ff; box-shadow: 0 8px 28px #007fff60, inset 0 0 20px #65d4ff55; }
}
@keyframes mac-core-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes mac-plate-idle { 0%, 100% { translate: 0 0; } 50% { translate: var(--plate-drift, 1px) 0; } }

@media (min-width: 1600px) {
  .mac-hero-copy h1 { font-size: 48px; }
  .mac-hero-copy .mac-description { max-width: 600px; }
  .mac-hero-actions .mac-button { min-height: 52px; font-size: 15px; padding-inline: 26px; }
  .mac-principles li { font-size: 12px; }
  .mac-hero-grid { row-gap: 30px; }
  .mac-kicker { margin-bottom: 30px; }
  .mac-wordmark { margin-bottom: 30px; }
  .mac-hero-apps { column-gap: 24px; }
  .mac-app-card { min-height: 57px; padding-inline: 12px; }
  .mac-app-list { gap: 4px; }
  .mac-app-label strong { font-size: 14px; }
  .mac-app-label small { font-size: 10px; }
  .mac-architecture { height: 540px; }
  .mac-core-float { width: 190px; height: 190px; }
  .mac-layers { top: 226px; width: min(306px, calc(100% - 52px)); }
  .mac-layer { height: 76px; }
  .mac-layer-plate { height: 68px; }
  .mac-overview-copy > p:not(.mac-eyebrow) { font-size: 17px; }
  .mac-steps p { font-size: 14px; }
  .mac-benefit { min-height: 96px; padding: 18px; }
  .mac-benefit h3 { font-size: 16px; }
  .mac-benefit p { font-size: 13px; }
  .mac-closing-grid { padding-block: 8px; }
}

@media (max-width: 1199px) {
  .mac-container, body.ecosystem-view .mac-nav { width: calc(100% - 64px); }
  body.ecosystem-view .mac-nav:not([hidden]) { min-height: 79px; gap: 16px; }
  .mac-nav-links { display: none; }
  .mac-menu-toggle { display: inline-flex; }
  .mac-nav-demo { margin-left: auto; }
  .mac-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto auto; gap: 24px 30px; padding-block: 40px; min-height: auto; }
  .mac-hero-copy { padding-right: 0; }
  .mac-hero-copy h1 { font-size: clamp(32px, 3.5vw, 40px); }
  .mac-wordmark { width: 330px; }
  .mac-architecture { grid-column: 2; grid-row: 1 / 4; width: 100%; max-width: 370px; justify-self: center; }
  .mac-hero-actions { gap: 10px; }
  .mac-hero-actions .mac-button { padding-inline: 16px; font-size: 11px; }
  .mac-principles { padding-right: 0; gap: 8px; }
  .mac-principles li { gap: 5px; font-size: 9px; }
  .mac-hero-apps { grid-column: 1 / -1; grid-row: 4; grid-template-columns: minmax(0, 1fr) 165px; gap: 20px; height: auto; padding-left: 0; }
  .mac-app-list { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-column: 1; grid-row: 1 / 3; }
  .mac-app-card { gap: 7px; padding: 7px; }
  .mac-app-label strong { font-size: 10px; }
  .mac-app-icon { flex-basis: 30px; width: 30px; height: 30px; }
  .mac-app-icon svg { width: 22px; height: 22px; }
  .mac-hero-apps .mac-direction { align-self: start; font-size: 12px; padding: 0 0 0 12px; }
  .mac-detail .mac-hero-note { font-size: 23px; padding-bottom: 0; }
  .mac-overview-grid { padding-block: 26px; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); }
  .mac-overview-copy { padding-right: 24px; }
  .mac-indicators { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
  .mac-ecosystem-scene { height: 320px; }
  .mac-orbit-app { width: 90px; }
  .mac-orbit-app .mac-app-label strong { font-size: 9px; }
  .mac-orbit-app .mac-app-label small { font-size: 8px; }
  .mac-detail .mac-ecosystem-note { right: -5px; font-size: 15px; }
  .mac-operation-heading > p { max-width: 320px; }
  .mac-operation-heading h2 br { display: initial; }
  .mac-steps { gap: 26px; }
  .mac-steps li { align-items: start; gap: 9px; }
  .mac-steps li:not(:last-child)::after { right: -18px; width: 10px; }
  .mac-step-icon { flex-basis: 44px; width: 44px; height: 44px; }
  .mac-step-icon svg { width: 24px; height: 24px; }
  .mac-steps h3 { font-size: 13px; }
  .mac-demo-copy { padding-right: 24px; }
  .mac-demo-copy h2 { font-size: 25px; }
  .mac-screen { grid-template-columns: 44px minmax(0, 1fr); }
  .mac-screen-content { padding: 10px; }
  .mac-benefit-grid { gap: 10px; }
  .mac-benefit { gap: 9px; padding: 12px; align-items: start; }
  .mac-benefit > svg { width: 26px; height: 26px; }
  .mac-benefit h3 { font-size: 12px; }
  .mac-closing-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); }
  .mac-closing h2 { font-size: 20px; }
}

@media (min-width: 701px) and (max-width: 950px) {
  .mac-hero-apps { grid-template-columns: minmax(0, 1fr) 140px; }
  .mac-app-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mac-overview-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .mac-overview-copy { padding-right: 0; }
  .mac-overview-copy > p:not(.mac-eyebrow) { max-width: 620px; }
  .mac-indicators { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mac-ecosystem-art { width: min(680px, 100%); justify-self: center; }
  .mac-ecosystem-scene { height: 340px; }
  .mac-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 36px; }
  .mac-steps li:nth-child(2)::after { display: none; }
  .mac-demo-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .mac-demo-copy { padding-right: 0; }
  .mac-demo-copy > p:not(.mac-eyebrow) { max-width: 580px; }
  .mac-area-selector { max-width: 550px; margin-block: 15px; }
  .mac-screen { grid-template-columns: 44px minmax(0, 1fr); }
  .mac-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mac-closing h2 br, .mac-desktop-break { display: none; }
  .mac-closing-grid > .mac-handwriting { font-size: 27px; }
}

@media (max-width: 700px) {
  .mac-container, body.ecosystem-view .mac-nav { width: calc(100% - 36px); }
  body.ecosystem-view .mac-nav:not([hidden]) { min-height: 71px; gap: 10px; }
  .mac-brand img { width: 136px; }
  .mac-nav-demo { min-height: 40px; padding: 8px 10px; font-size: 10px; }
  .mac-menu-toggle { gap: 8px; padding-inline: 8px; font-size: 11px; }
  .mac-detail h2 { font-size: 26px; }
  .mac-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(5, auto); gap: 25px; padding-block: 30px; }
  .mac-hero-copy { grid-column: 1; grid-row: 1; }
  .mac-kicker { margin-bottom: 20px; gap: 13px; font-size: 9px; }
  .mac-wordmark { width: min(350px, 88%); margin-bottom: 23px; }
  .mac-wordmark > span { width: min(300px, 94%); font-size: 20px; }
  .mac-hero-copy h1 { max-width: 540px; font-size: clamp(30px, 5.7vw, 40px); }
  .mac-hero-copy .mac-description { max-width: 540px; font-size: 14px; }
  .mac-architecture { grid-column: 1; grid-row: 2; height: 430px; width: min(340px, 100%); margin-block: 2px; }
  .mac-core-float { top: 0; width: 140px; height: 140px; }
  .mac-core-tile { transform: none; border-radius: 24px; }
  .mac-architecture-depth { transform: none !important; }
  .mac-layers { top: 165px; left: 50%; width: min(282px, calc(100% - 30px)); }
  .mac-layer:nth-child(n) { left: 0; height: 63px; }
  .mac-layer-plate { height: 55px; transform: none; border-radius: 11px; }
  .mac-layer-plate::before, .mac-layer-plate::after { display: none; }
  .mac-layer-plate > span { justify-content: center; width: 100%; margin: 0; padding-inline: 14px; border: 0; background: none; }
  .mac-layer svg { width: 28px; height: 28px; }
  .mac-hero-apps { grid-column: 1; grid-row: 3; grid-template-columns: minmax(0, 1fr) minmax(100px, 0.7fr); gap: 14px; }
  .mac-app-list { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mac-hero-apps .mac-direction { grid-column: 1; grid-row: 1; font-size: 12px; }
  .mac-detail .mac-hero-note { grid-column: 2; grid-row: 1; justify-self: center; align-self: center; font-size: 23px; }
  .mac-app-card { min-height: 58px; gap: 8px; padding: 8px; }
  .mac-app-label strong { font-size: 11px; }
  .mac-app-label small { font-size: 9px; }
  .mac-hero-actions { grid-column: 1; grid-row: 4; gap: 10px; }
  .mac-hero-actions .mac-button { flex: 1; min-height: 46px; padding-inline: 13px; font-size: 12px; }
  .mac-principles { grid-column: 1; grid-row: 5; max-width: none; }
  .mac-principles li { flex-direction: column; align-items: start; gap: 5px; font-size: 10px; }
  .mac-overview-grid { grid-template-columns: minmax(0, 1fr); gap: 25px; padding-block: 30px 22px; }
  .mac-overview-copy { padding-right: 0; }
  .mac-overview-copy > p:not(.mac-eyebrow) { font-size: 13px; }
  .mac-indicators { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
  .mac-indicators dt { font-size: 7px; letter-spacing: 0; }
  .mac-indicators dd { font-size: 10px; }
  .mac-ecosystem-art { width: 100%; max-width: 560px; justify-self: center; }
  .mac-ecosystem-scene { height: 345px; margin-bottom: 50px; }
  .mac-ecosystem-core { left: 49%; }
  .mac-ecosystem-core > div { width: 110px; height: 110px; }
  .mac-ecosystem-core > strong { font-size: 12px; }
  .mac-ecosystem-core > span { font-size: 9px; }
  .mac-orbit-app { width: 82px; }
  .mac-orbit-app .mac-app-label strong { font-size: 8px; }
  .mac-orbit-app .mac-app-label small { font-size: 8px; }
  .mac-orbit-app[data-app="mia"] { left: 23%; }
  .mac-orbit-app[data-app="crm"] { left: 46%; }
  .mac-orbit-app[data-app="magda"] { left: 70%; }
  .mac-orbit-app[data-app="madi"] { left: 86%; }
  .mac-orbit-app[data-app="mat"] { left: 86%; }
  .mac-orbit-app[data-app="emprendedores"] { left: 13%; }
  .mac-orbit-app[data-app="bt-latina"] { left: 17%; }
  .mac-detail .mac-ecosystem-note { right: 0; bottom: -48px; font-size: 15px; }
  .mac-operation { padding-block: 28px; }
  .mac-operation-heading { grid-template-columns: 1fr; align-items: start; gap: 12px; margin-bottom: 22px; }
  .mac-operation-heading h2 { font-size: 25px; }
  .mac-operation-heading > p { max-width: 500px; font-size: 12px; }
  .mac-steps { grid-template-columns: 1fr; gap: 30px; }
  .mac-steps li { flex-direction: row; gap: 18px; align-items: center; }
  .mac-steps li:not(:last-child)::after { display: block; top: auto; bottom: -20px; left: 18px; right: auto; transform: rotate(135deg); }
  .mac-steps h3 { font-size: 14px; }
  .mac-steps p { max-width: none; font-size: 13px; }
  .mac-demo-section { padding-block: 30px; }
  .mac-demo-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .mac-demo-copy { padding-right: 0; }
  .mac-demo-copy > p:not(.mac-eyebrow) { font-size: 13px; }
  .mac-area-selector { grid-template-columns: repeat(5, 100px); overflow-x: auto; gap: 8px; margin-block: 16px; padding-bottom: 8px; }
  .mac-area-selector button { min-height: 94px; padding-inline: 5px; font-size: 11px; }
  .mac-area-selector svg { width: 24px; height: 24px; }
  .mac-demo-copy > .mac-button { min-height: 44px; }
  .mac-screen { grid-template-columns: 44px minmax(0, 1fr); }
  .mac-screen-sidebar svg { width: 14px; height: 14px; }
  .mac-screen-content { padding: 6px; margin: 7px; }
  .mac-screen-topbar { gap: 5px; padding-inline: 9px; font-size: 7px; }
  .mac-screen-toolbar { flex-wrap: wrap; gap: 7px; }
  .mac-screen-toolbar h3 { font-size: 11px; }
  .mac-screen-actions :is(button, a) { min-height: 32px; padding-inline: 8px; font-size: 9px; }
  .mac-screen-utilities { gap: 7px; }
  .mac-screen-utilities svg:nth-of-type(n+4) { display: none; }
  .mac-screen-topbar > span { font-size: 7px; }
  .mac-screen-toolbar { padding: 10px; }
  .mac-screen-pagination { flex-wrap: wrap; }
  .mac-screen-content .mac-screen-disclaimer { font-size: 8px; }
  .mac-benefits { padding-block: 28px; }
  .mac-benefits h2 { font-size: 25px; }
  .mac-benefit-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
  .mac-benefit { flex-direction: row; gap: 16px; padding: 20px; }
  .mac-benefit > svg { width: 44px; height: 44px; }
  .mac-benefit h3 { font-size: 16px; }
  .mac-benefit p { font-size: 14px; }
  .mac-interface-note { right: 0; bottom: -15px; font-size: 9px; padding: 10px; }
  .mac-closing-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-block: 28px; }
  .mac-closing h2 { font-size: 23px; }
  .mac-closing h2 br, .mac-desktop-break { display: none; }
  .mac-closing-grid > div > p { font-size: 12px; }
  .mac-closing-actions { gap: 9px; }
  .mac-closing-actions .mac-button { min-height: 44px; padding-inline: 13px; }
  .mac-closing-grid > .mac-handwriting { justify-self: end; padding-right: 16px; font-size: 29px; }
  .mac-footer > .mac-container { flex-wrap: wrap; gap: 12px; padding-block: 16px; }
  .mac-footer p { font-size: 7px; line-height: 1.7; letter-spacing: 0.03em; }
  .mac-footer b { margin-inline: 4px; }
  .mac-dialog-header { padding: 14px 16px; gap: 12px; }
  .mac-dialog-header h2 { font-size: 19px; }
  .mac-dialog-body { padding: 18px 16px; }
  .mac-tour-record { padding: 14px; }
}

@media (max-width: 380px) {
  .mac-container, body.ecosystem-view .mac-nav { width: calc(100% - 28px); }
  .mac-brand img { width: 112px; }
  .mac-nav-demo { padding-inline: 7px; font-size: 9px; }
  .mac-menu-toggle { gap: 5px; }
  .mac-hero-actions { flex-direction: column; align-items: stretch; }
  .mac-app-card { padding: 6px; gap: 6px; }
  .mac-app-label strong { font-size: 9px; }
  .mac-app-label small { font-size: 8px; }
  .mac-orbit-app { width: 72px; }
  .mac-orbit-app .mac-app-label strong { font-size: 7px; }
  .mac-ecosystem-core > div { width: 96px; height: 96px; }
  .mac-detail .mac-ecosystem-note { font-size: 13px; }
  .mac-tour-record dl { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .mac-architecture-depth { transform: none !important; }
  body.mac-view,
  .mac-detail,
  .mac-detail *,
  .mac-detail *::before,
  .mac-detail *::after,
  .mac-nav *,
  .mac-dialog,
  .mac-dialog *,
  .mac-dialog::backdrop {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}