/* ==========================================================================
   PixelSur · mockups.css
   Interfaces ilustrativas dibujadas con HTML y CSS: primitivas de UI,
   composición del hero, demos de servicios y mockups del portfolio.

   Las "artboards" se diseñan a un tamaño fijo (data-artboard="ANCHOxALTO")
   y main.js las escala para que entren en el ancho disponible.
   ========================================================================== */

/* Pantallas de los mockups: gris claro para que se distingan del fondo blanco de la página,
   tarjetas blancas encima y marcos de dispositivo plateados. */
.artboard,
.admin-demo {
  --mock-screen: #EEF2F6;
  --mock-panel: #FFFFFF;
  --mock-bezel: linear-gradient(160deg, #F6F8FA 0%, #DDE3E9 45%, #C8D0D9 100%);
}

/* ---------- Artboard escalable ---------- */
.artboard {
  --ab-scale: 1;
  position: relative;
  flex: none;
  width: var(--ab-w, 600px);
  height: var(--ab-h, 300px);
  margin-right: calc(var(--ab-w, 600px) * (var(--ab-scale) - 1));
  margin-bottom: calc(var(--ab-h, 300px) * (var(--ab-scale) - 1));
  transform-origin: 0 0;
  scale: var(--ab-scale);
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-2);
  text-align: left;
  user-select: none;
  -webkit-user-select: none;
}
.artboard * { -webkit-font-smoothing: antialiased; }

/* ---------- Primitivas de interfaz ---------- */
.ui-window {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgb(var(--tint-rgb) / .13);
  border-radius: 14px;
  background: var(--mock-screen);
  box-shadow: 0 40px 80px -30px rgba(4, 20, 30, .32), 0 0 0 1px rgba(4, 20, 30, .14), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.ui-bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 12px;
  border-bottom: 1px solid rgb(var(--tint-rgb) / .08);
  background: var(--mock-panel);
}
.ui-dots { display: flex; gap: 5px; }
.ui-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--tint-rgb) / .2); }
.ui-url {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 18px;
  margin-inline: auto;
  padding: 0 10px;
  border-radius: 6px;
  background: rgb(var(--tint-rgb) / .06);
  font-size: 9px;
  color: var(--text-3);
}
.ui-url .icon { width: 9px; height: 9px; }
.ui-crumb { font-size: 10px; color: var(--text-3); white-space: nowrap; }
.ui-crumb b { margin: 0 3px; font-weight: 400; color: rgb(var(--tint-rgb) / .28); }
.ui-bar-end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ui-tag {
  padding: 3px 7px;
  border: 1px solid rgb(var(--warning-rgb) / .35);
  border-radius: 5px;
  background: rgb(var(--warning-rgb) / .12);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--warning);
  white-space: nowrap;
}
.ui-avatar {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  background: var(--grad-accent);
  font-size: 8px;
  font-weight: 700;
  font-style: normal;
  color: var(--text-on-light);
}
.ui-avatar.is-soft { background: var(--accent-soft); color: var(--accent-strong); }
.ui-line {
  display: block;
  width: var(--w, 100%);
  height: 6px;
  border-radius: 4px;
  background: rgb(var(--tint-rgb) / .11);
}
.ui-title { font-family: var(--font-display); font-size: 13px; font-weight: 650; color: var(--text); }
.ui-sub { font-size: 9px; color: var(--text-3); }
.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 9px;
  border: 1px solid rgb(var(--tint-rgb) / .11);
  border-radius: 6px;
  font-size: 9.5px;
  color: var(--text-2);
  white-space: nowrap;
}
.ui-chip .icon { width: 10px; height: 10px; }
.ui-label { font-size: 9px; color: var(--text-3); }
.ui-value {
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ui-delta {
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 8.5px;
  font-weight: 600;
  font-style: normal;
}
.ui-delta.is-up { color: var(--success); background: rgb(var(--success-rgb) / .1); }
.ui-kpi,
.ui-card {
  position: relative;
  padding: 10px;
  border: 1px solid rgb(var(--tint-rgb) / .08);
  border-radius: 10px;
  background: var(--mock-panel);
}
.ui-kpi .ui-delta { position: absolute; top: 9px; right: 9px; }
.ui-card-head { display: flex; align-items: center; justify-content: space-between; }
.ui-legend { display: flex; align-items: center; gap: 4px; font-size: 8.5px; color: var(--text-3); }
.ui-legend i { width: 6px; height: 6px; border-radius: 2px; background: var(--accent); }
.ui-pill {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 8.5px;
  font-weight: 600;
  font-style: normal;
  white-space: nowrap;
}
.ui-pill.is-ok { color: var(--success); background: rgb(var(--success-rgb) / .12); }
.ui-pill.is-warn { color: var(--warning); background: rgb(var(--warning-rgb) / .16); }
.ui-pill.is-info { color: var(--info); background: rgba(37, 96, 196, .1); }
.ui-pill.is-muted { color: var(--text-2); background: rgb(var(--tint-rgb) / .08); }
.ui-pill.is-danger { color: var(--danger); background: rgb(var(--danger-rgb) / .1); }

/* Teléfono */
.ui-phone {
  position: relative;
  padding: 6px;
  border-radius: 30px;
  background: var(--mock-bezel);
  box-shadow: 0 40px 70px -24px rgba(4, 20, 30, .34), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 0 0 1px rgba(4, 20, 30, .2);
}
.ui-phone-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 24px;
  background: var(--mock-screen);
  container-type: inline-size;
}
.ui-phone-screen::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 50%;
  z-index: 6;
  width: 30%;
  height: 12px;
  border-radius: 999px;
  background: #000;
  translate: -50% 0;
}
.ui-status {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 26px;
  padding: 0 14px 0 18px;
  font-size: 9px;
  font-weight: 600;
  color: var(--text);
}
.ui-status-icons { display: flex; align-items: center; gap: 4px; }
.ui-status .sig {
  width: 11px;
  height: 7px;
  background: currentColor;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  opacity: .9;
}
.ui-status .bat {
  position: relative;
  width: 15px;
  height: 7.5px;
  border: 1px solid rgb(var(--tint-rgb) / .55);
  border-radius: 2.5px;
}
.ui-status .bat::after {
  content: '';
  position: absolute;
  inset: 1px 3px 1px 1px;
  border-radius: 1px;
  background: currentColor;
}

/* Laptop y tablet */
.pm-laptop { position: absolute; }
.pm-laptop-lid {
  padding: 10px 10px 14px;
  border-radius: 16px 16px 5px 5px;
  background: var(--mock-bezel);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px -30px rgba(4, 20, 30, .34);
}
.pm-screen {
  height: 100%;
  overflow: hidden;
  border-radius: 6px;
  background: var(--mock-screen);
  container-type: inline-size;
}
.pm-laptop-base {
  position: relative;
  height: 15px;
  margin-inline: -42px;
  border-radius: 2px 2px 14px 14px;
  background: linear-gradient(180deg, #DCE2E8 0%, #B8C1CB 100%);
  box-shadow: 0 24px 40px -12px rgba(4, 20, 30, .32), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.pm-laptop-base::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 90px;
  height: 5px;
  translate: -50% 0;
  border-radius: 0 0 8px 8px;
  background: rgba(4, 20, 30, .12);
}
.pm-tablet {
  position: absolute;
  padding: 9px;
  border-radius: 22px;
  background: var(--mock-bezel);
  box-shadow: 0 40px 70px -24px rgba(4, 20, 30, .34), inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.pm-tablet-screen {
  height: 100%;
  overflow: hidden;
  border-radius: 14px;
  background: var(--mock-screen);
}

/* Tarjeta flotante tipo notificación */
.toast-card,
.pm-float {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px 10px 10px;
  border: 1px solid rgb(var(--tint-rgb) / .13);
  border-radius: 14px;
  background: var(--mock-panel);
  box-shadow: 0 22px 44px -16px rgba(4, 20, 30, .32);
  font-size: 9px;
  color: var(--text-3);
  white-space: nowrap;
}
.toast-card b,
.pm-float b {
  display: block;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 650;
  color: var(--text);
}
.toast-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: rgb(var(--success-rgb) / .12);
  color: var(--success);
}
.toast-icon .icon { width: 14px; height: 14px; stroke-width: 2.2; }

/* Gráfico de área compartido */
.area-grid { fill: none; stroke: rgb(var(--tint-rgb) / .07); stroke-width: 1; }
.area-line { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero-stage {
  --ab-w: 640px;
  --ab-h: 620px;
}
.hv-halo {
  position: absolute;
  left: 50px;
  top: 110px;
  width: 580px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--accent-rgb) / .3), rgb(var(--accent-rgb) / .12) 55%, transparent 100%);
  animation: halo-breathe 10s ease-in-out infinite alternate;
}
@keyframes halo-breathe {
  from { opacity: .75; scale: .96; }
  to { opacity: 1; scale: 1.04; }
}
.hv-geo,
.hv-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.hv-geo { animation: fade-in 2s .2s both; }
.hv-links { animation: fade-in 1.2s 1.3s both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.hv-ring { transform-origin: 330px 340px; animation: spin 90s linear infinite; }
.hv-ring circle { fill: none; stroke: rgb(var(--accent-rgb) / .16); stroke-width: 1; stroke-dasharray: 2 7; }
.hv-ring-2 { fill: none; stroke: rgb(var(--tint-rgb) / .06); stroke-width: 1; }
.hv-sq { fill: none; stroke: rgb(var(--accent-rgb) / .55); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: spin 16s linear infinite; }
.hv-sq-2 { animation-duration: 22s; animation-direction: reverse; }
.hv-plus { fill: none; stroke: rgb(var(--tint-rgb) / .31); stroke-width: 1.2; stroke-linecap: round; }
.hv-dots circle { fill: rgb(var(--tint-rgb) / .22); }
@keyframes spin { to { rotate: 360deg; } }

.hv-link {
  fill: none;
  stroke: rgb(var(--accent-rgb) / .45);
  stroke-width: 1.2;
  stroke-dasharray: 3 5;
  animation: dash-flow 1.6s linear infinite;
}
@keyframes dash-flow { to { stroke-dashoffset: -16; } }
.hv-node { fill: var(--mock-panel); stroke: var(--accent); stroke-width: 1.5; }
.hv-packet {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #D3DAFF;
  box-shadow: 0 0 10px 2px rgb(var(--accent-rgb) / .85);
  offset-rotate: 0deg;
  opacity: 0;
  animation: packet-travel 3.4s var(--ease-in-out) 1.6s infinite;
}
.hv-packet-1 { offset-path: path('M300 96C350 96 362 82 412 82'); }
.hv-packet-2 { offset-path: path('M482 100C482 128 470 140 470 168'); animation-delay: 2.7s; }
.hv-packet-3 { offset-path: path('M560 82C606 82 604 190 566 238'); animation-delay: 3.6s; }
@keyframes packet-travel {
  0% { offset-distance: 0%; opacity: 0; }
  12% { opacity: 1; }
  80% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

.hv-layer {
  position: absolute;
  transform: translate3d(calc(var(--px, 0) * var(--depth, 1) * 1px), calc(var(--py, 0) * var(--depth, 1) * 1px), 0);
  transition: transform 1.2s var(--ease-out);
  animation: hv-in 1.2s var(--ease-out) both;
}
@keyframes hv-in {
  from { opacity: 0; scale: .94; filter: blur(8px); }
  to { opacity: 1; scale: 1; filter: blur(0); }
}
.hv-web { left: 0; top: 36px; z-index: 1; width: 300px; animation-delay: .45s; }
.hv-dash { left: 70px; top: 166px; z-index: 2; width: 480px; animation-delay: .6s; }
.hv-phone { left: 462px; top: 232px; z-index: 3; width: 178px; animation-delay: .8s; }
.hv-hub { left: 412px; top: 64px; z-index: 4; animation-delay: 1.05s; }
.hv-toast { left: 14px; top: 468px; z-index: 5; animation-delay: 1.3s; }

.hv-float { animation: float-y 7s ease-in-out infinite; }
.hv-web .hv-float { animation-duration: 8.5s; animation-delay: -3s; }
.hv-phone .hv-float { animation-duration: 6.5s; animation-delay: -1s; }
.hv-hub .hv-float { animation-duration: 5.5s; animation-delay: -2s; }
@keyframes float-y {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

/* Interfaz web del hero */
.hv-web-win { height: 214px; }
.mini-web { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 10px 12px 12px; }
.mw-nav { display: flex; align-items: center; gap: 8px; }
.mw-logo { display: flex; align-items: center; gap: 5px; font-family: var(--font-display); font-size: 9px; font-weight: 700; color: var(--text); }
.mw-logo i { width: 10px; height: 10px; border-radius: 3px; background: linear-gradient(135deg, #F2C46D, #E58F6B); }
.mw-links { display: flex; gap: 6px; margin-left: auto; }
.mw-links i { width: 20px; height: 4px; border-radius: 2px; background: rgb(var(--tint-rgb) / .17); }
.mw-btn { padding: 3px 7px; border-radius: 999px; background: var(--text); font-size: 7.5px; font-weight: 600; color: var(--text-on-light); }
.mw-hero { display: grid; flex: 1; grid-template-columns: 1.1fr .9fr; gap: 10px; }
.mw-copy { display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.mw-kicker { font-size: 6.5px; font-weight: 600; letter-spacing: .14em; color: #B7791F; }
.mw-title { font-family: var(--font-display); font-size: 14px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--text); }
.mw-ctas { display: flex; gap: 5px; margin-top: 4px; }
.mw-ctas i { padding: 4px 8px; border: 1px solid rgb(var(--tint-rgb) / .21); border-radius: 999px; font-size: 7px; font-style: normal; color: var(--text-2); }
.mw-ctas i.is-solid { border-color: transparent; background: linear-gradient(135deg, #F2C46D, #E58F6B); font-weight: 600; color: #1A1206; }
.mw-art {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: radial-gradient(circle at 70% 30%, rgba(242, 196, 109, .4), transparent 55%), linear-gradient(160deg, #FBF3E7, #F2E6D6);
}
.mw-art i { position: absolute; border-radius: 50%; }
.mw-art i:nth-child(1) { top: 12px; right: -12px; width: 62px; height: 62px; background: linear-gradient(135deg, rgba(242, 196, 109, .75), rgba(229, 143, 107, .25)); }
.mw-art i:nth-child(2) { bottom: 12px; left: 14px; width: 34px; height: 34px; border: 1px solid rgb(var(--tint-rgb) / .42); }
.mw-art i:nth-child(3) { top: 52%; left: -10px; width: 100px; height: 1px; border-radius: 0; background: rgb(var(--tint-rgb) / .31); rotate: -20deg; }
.mw-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mw-features span { display: flex; align-items: center; gap: 5px; padding: 6px; border: 1px solid rgb(var(--tint-rgb) / .07); border-radius: 6px; background: var(--mock-panel); }
.mw-features i { width: 10px; height: 10px; flex: none; border-radius: 3px; background: rgba(242, 196, 109, .3); }
.mw-features .ui-line { height: 4px; }

/* Dashboard del hero */
.dash { display: flex; flex: 1; min-height: 0; }
.dash-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 44px;
  padding: 12px 0;
  border-right: 1px solid rgb(var(--tint-rgb) / .07);
  background: var(--mock-panel);
}
.dash-logo { width: 20px; height: 20px; margin-bottom: 8px; border-radius: 6px; background: var(--grad-accent); opacity: .9; }
.dash-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--text-3); }
.dash-ico .icon { width: 14px; height: 14px; }
.dash-ico.is-active { background: rgb(var(--accent-rgb) / .14); color: var(--accent-strong); }
.dash-main { display: flex; flex: 1; flex-direction: column; gap: 9px; min-width: 0; padding: 11px 13px 13px; }
.dash-head { display: flex; align-items: center; justify-content: space-between; }
.dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dash-charts { display: grid; grid-template-columns: 1fr 112px; gap: 8px; }
.area-chart { width: 100%; height: 66px; margin-top: 8px; overflow: visible; }
.dash-area .area-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw-line 2.2s 1.2s var(--ease-out) forwards; }
.dash-area .area-fill { opacity: 0; animation: fade-in 1.4s 1.9s forwards; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
.area-dot {
  position: absolute;
  top: 34px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .35), 0 0 12px rgb(var(--accent-rgb) / .9);
  opacity: 0;
  animation: fade-in .6s 3.2s forwards, pulse-ring 2.4s 3.4s infinite;
}
.dash-donut { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dash-donut .ui-label { align-self: flex-start; }
.donut { width: 62px; height: 62px; rotate: -90deg; }
.donut circle { fill: none; stroke-width: 5; }
.donut-track { stroke: rgb(var(--tint-rgb) / .08); }
.donut-seg.s1 { stroke: var(--accent); }
.donut-seg.s2 { stroke: var(--accent-bright); }
.donut-seg.s3 { stroke: var(--accent-light); }
.donut-legend { display: flex; gap: 6px; font-size: 7.5px; color: var(--text-3); }
.donut-legend i { display: inline-block; width: 5px; height: 5px; margin-right: 3px; border-radius: 50%; }
.donut-legend .s1 { background: var(--accent); }
.donut-legend .s2 { background: var(--accent-bright); }
.donut-legend .s3 { background: var(--accent-light); }
.dash-table { border: 1px solid rgb(var(--tint-rgb) / .08); border-radius: 10px; overflow: hidden; }
.dt-row {
  display: grid;
  grid-template-columns: 50px 1fr 76px 56px;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-top: 1px solid rgb(var(--tint-rgb) / .07);
  font-size: 9.5px;
  color: var(--text-2);
}
.dt-row span:last-child { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.dt-head { height: 21px; border-top: 0; background: var(--mock-panel); font-size: 7.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.dt-head span:last-child { color: var(--text-3); }
.dt-row.is-flash { animation: row-flash 1.8s var(--ease-out); }
@keyframes row-flash {
  0% { background: rgb(var(--accent-rgb) / .2); }
  100% { background: transparent; }
}

/* App del hero */
.hv-phone .ui-phone { height: 368px; }
.hv-app { display: flex; flex-direction: column; gap: 8px; padding: 0 11px; }
.hv-app .ui-status { margin-inline: -11px; }
.app-head { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.app-hello { font-size: 9px; color: var(--text-3); }
.app-title { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.app-next {
  position: relative;
  padding: 10px;
  border: 1px solid rgb(var(--accent-rgb) / .25);
  border-radius: 12px;
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / .22), rgb(var(--accent-rgb) / .06));
}
.app-next .ui-pill { position: absolute; top: 9px; right: 9px; }
.app-next-date { margin-top: 2px; font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--text); }
.app-next-sub { font-size: 8.5px; color: var(--text-2); }
.app-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.app-days span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 0;
  border-radius: 8px;
  background: var(--mock-panel);
  font-size: 10px;
  font-weight: 600;
  color: var(--text);
}
.app-days i { font-size: 7px; font-style: normal; font-weight: 500; color: var(--text-3); }
.app-days .is-active { background: var(--accent); color: var(--text-on-light); }
.app-days .is-active i { color: rgb(255 255 255 / .75); }
.app-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.app-slots span {
  padding: 5px 0;
  border: 1px solid rgb(var(--tint-rgb) / .11);
  border-radius: 7px;
  text-align: center;
  font-size: 8.5px;
  font-weight: 600;
  color: var(--text-2);
  transition: background-color .5s var(--ease-out), border-color .5s, color .5s;
}
.app-slots .is-active { border-color: rgb(var(--accent-rgb) / .55); background: rgb(var(--accent-rgb) / .18); color: var(--text); }
.app-slots .is-off { opacity: .35; text-decoration: line-through; }
.app-cta {
  display: block;
  margin-top: 2px;
  padding: 8px;
  border-radius: 10px;
  background: var(--text);
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-on-light);
}
.app-tabs {
  display: flex;
  justify-content: space-around;
  margin-top: auto;
  padding: 8px 0 12px;
  border-top: 1px solid rgb(var(--tint-rgb) / .08);
}
.app-tabs .icon { width: 14px; height: 14px; color: var(--text-3); }
.app-tabs .icon.is-active { color: var(--accent); }
.hv-app .app-tabs { position: absolute; right: 0; bottom: 0; left: 0; }
.hv-push {
  position: absolute;
  top: 30px;
  right: 7px;
  left: 7px;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgb(var(--tint-rgb) / .11);
  border-radius: 12px;
  background: var(--mock-panel);
  box-shadow: 0 12px 24px -8px rgba(4, 20, 30, .27);
  font-size: 8px;
  color: var(--text-2);
  opacity: 0;
  translate: 0 -150%;
  transition: translate .7s var(--ease-out), opacity .45s;
}
.hv-push.is-shown { opacity: 1; translate: 0 0; }
.hv-push b { display: block; font-size: 8.5px; color: var(--text); }
.hv-push-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 7px;
  background: var(--grad-accent);
  color: var(--text-on-light);
}
.hv-push-icon .icon { width: 12px; height: 12px; }

/* Chip de integración y notificación */
.hub-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 13px 0 6px;
  border: 1px solid rgb(var(--accent-rgb) / .3);
  border-radius: 999px;
  background: var(--mock-panel);
  box-shadow: 0 10px 30px -10px rgba(4, 20, 30, .27), 0 0 26px -6px rgb(var(--accent-rgb) / .35);
  font-size: 10px;
  color: var(--text-2);
  white-space: nowrap;
}
.hub-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); }
.hub-icon .icon { width: 13px; height: 13px; }
.hub-chip b { font-family: var(--font-display); font-size: 10.5px; color: var(--text); }
.hub-sep { width: 1px; height: 12px; background: rgb(var(--tint-rgb) / .17); }
.hub-chip .pulse-dot { width: 6px; height: 6px; margin-left: 2px; }
.toast-card.is-bump { animation: toast-bump .9s var(--ease-out); }
@keyframes toast-bump {
  0% { opacity: .3; scale: .92; }
  60% { opacity: 1; scale: 1.03; }
  100% { scale: 1; }
}

/* Composición compacta para pantallas angostas */
@media (max-width: 639px) {
  .hero-stage { --ab-w: 520px; --ab-h: 446px; }
  .hv-web,
  .hv-hub,
  .hv-links,
  .hv-packet,
  .hv-sq,
  .hv-plus,
  .hv-dots { display: none; }
  .hv-halo { left: 0; top: 40px; width: 520px; height: 400px; }
  .hv-ring { transform-origin: 260px 220px; }
  .hv-dash { left: 0; top: 0; width: 430px; }
  .hv-phone { left: 342px; top: 72px; }
  .hv-toast { left: 10px; top: 382px; }
  .dash-donut { display: none; }
  .dash-charts { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SERVICIOS · demos
   ========================================================================== */

/* Servicio web: marco que cambia de dispositivo */
.devframe {
  --df-w: 560px;
  position: absolute;
  top: 8px;
  left: 50%;
  display: flex;
  flex-direction: column;
  width: var(--df-w);
  height: 284px;
  overflow: hidden;
  border: 1px solid rgb(var(--tint-rgb) / .14);
  border-radius: 12px;
  background: var(--mock-screen);
  box-shadow: 0 30px 60px -24px rgba(4, 20, 30, .32);
  translate: -50% 0;
  transition: width .8s var(--ease-out), border-radius .8s var(--ease-out);
}
.devframe[data-device="tablet"] { --df-w: 372px; border-radius: 18px; }
.devframe[data-device="mobile"] { --df-w: 196px; border-radius: 26px; }
.devframe-bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding: 0 10px;
  border-bottom: 1px solid rgb(var(--tint-rgb) / .08);
}
.devframe-bar .ui-url { font-size: 8.5px; }
.devframe[data-device="mobile"] .ui-dots { display: none; }
.devframe-view { position: relative; flex: 1; min-height: 0; overflow: hidden; container-type: inline-size; }

.ms {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px 16px;
  transition: translate 7s var(--ease-in-out);
}
@media (hover: hover) {
  .svc-web .svc-visual:hover .ms { translate: 0 calc(-100% + 256px); transition-duration: 5s; }
}
.svc-web.is-autoscroll .ms { animation: ms-scroll 14s var(--ease-in-out) infinite; }
@keyframes ms-scroll {
  0%, 12% { translate: 0 0; }
  50%, 62% { translate: 0 calc(-100% + 256px); }
  100% { translate: 0 0; }
}
.ms-nav { display: flex; align-items: center; gap: 12px; }
.ms-logo { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 10px; font-weight: 700; color: var(--text); white-space: nowrap; }
.ms-logo i { width: 12px; height: 12px; border-radius: 4px; background: linear-gradient(135deg, #7FD1C7, #4FA3B8); }
.ms-links { display: flex; gap: 12px; margin-left: auto; font-size: 8.5px; color: var(--text-2); }
.ms-links i { font-style: normal; }
.ms-btn { padding: 4px 9px; border-radius: 999px; background: linear-gradient(135deg, #7FD1C7, #4FA3B8); font-size: 8px; font-weight: 600; color: #06201C; }
.ms-burger { display: none; flex-direction: column; gap: 3px; width: 14px; margin-left: auto; }
.ms-burger i { height: 1.5px; border-radius: 1px; background: var(--text); }
.ms-hero { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 14px; }
.ms-hero-copy { display: flex; flex-direction: column; gap: 6px; }
.ms-kicker { font-size: 7px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #2F7F86; }
.ms-h { font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.06; letter-spacing: -.025em; color: var(--text); }
.ms-p { max-width: 32ch; font-size: 8.5px; color: var(--text-2); }
.ms-ctas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ms-ctas i { padding: 5px 10px; border: 1px solid rgb(var(--tint-rgb) / .2); border-radius: 999px; font-size: 7.5px; font-style: normal; color: var(--text); }
.ms-ctas i.is-solid { border-color: transparent; background: linear-gradient(135deg, #7FD1C7, #4FA3B8); font-weight: 600; color: #06201C; }
.ms-art {
  position: relative;
  height: 128px;
  overflow: hidden;
  border-radius: 12px;
  background: radial-gradient(circle at 30% 20%, rgba(127, 209, 199, .45), transparent 55%), linear-gradient(160deg, #E4F5F2, #CBE9E4);
}
.ms-art i { position: absolute; border-radius: 50%; }
.ms-art i:nth-child(1) { right: -20px; bottom: -30px; width: 120px; height: 120px; border: 1px solid rgba(127, 209, 199, .4); }
.ms-art i:nth-child(2) { right: 10px; bottom: 0; width: 70px; height: 70px; background: linear-gradient(135deg, rgba(127, 209, 199, .65), rgba(79, 163, 184, .2)); }
.ms-art i:nth-child(3) { top: 20px; left: 20px; width: 26px; height: 26px; background: #FFFFFF; box-shadow: 0 0 30px rgba(127, 209, 199, .8); }
.ms-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ms-features > div { display: flex; flex-direction: column; gap: 5px; padding: 10px; border: 1px solid rgb(var(--tint-rgb) / .08); border-radius: 10px; background: var(--mock-panel); }
.ms-features i { width: 16px; height: 16px; border-radius: 5px; background: rgba(127, 209, 199, .22); }
.ms-features b { font-size: 9px; color: var(--text); }
.ms-features .ui-line { height: 4px; }
.ms-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(127, 209, 199, .2);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(127, 209, 199, .16), rgba(79, 163, 184, .05));
}
.ms-band b { font-family: var(--font-display); font-size: 11px; }
.ms-band i { display: flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 999px; background: #4FBF8B; font-size: 8px; font-style: normal; font-weight: 600; color: #062014; white-space: nowrap; }
.ms-band .icon { width: 10px; height: 10px; }
.ms-form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ms-form span { height: 18px; border: 1px solid rgb(var(--tint-rgb) / .14); border-radius: 6px; }
.ms-form .is-wide { grid-column: 1 / -1; height: 34px; }
.ms-form i { grid-column: 1 / -1; justify-self: start; padding: 5px 12px; border-radius: 999px; background: var(--text); font-size: 8px; font-style: normal; font-weight: 600; color: var(--text-on-light); }
.ms-foot { display: flex; justify-content: space-between; padding-top: 8px; border-top: 1px solid rgb(var(--tint-rgb) / .08); }
@container (max-width: 420px) {
  .ms-hero { grid-template-columns: 1fr; }
  .ms-art { order: -1; height: 84px; }
  .ms-features { grid-template-columns: 1fr 1fr; }
  .ms-features > div:last-child { display: none; }
}
@container (max-width: 240px) {
  .ms { padding: 10px 11px 14px; gap: 10px; }
  .ms-links,
  .ms-btn { display: none; }
  .ms-burger { display: flex; }
  .ms-h { font-size: 15px; }
  .ms-features { grid-template-columns: 1fr; }
  .ms-features > div:last-child { display: flex; }
  .ms-band { flex-direction: column; align-items: flex-start; }
  .ms-form { grid-template-columns: 1fr; }
}

/* Servicio tienda */
.shop { position: absolute; top: 8px; right: 20px; left: 20px; height: 284px; }
.shop-top { display: flex; flex: none; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-bottom: 1px solid rgb(var(--tint-rgb) / .08); }
.shop-logo { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 11px; font-weight: 700; color: var(--text); }
.shop-logo i { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, #FF9F8A, #E8697F); }
.shop-search { display: flex; flex: 1; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 7px; background: var(--mock-panel); font-size: 8.5px; color: var(--text-3); }
.shop-search .icon { width: 10px; height: 10px; }
.shop-cart { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--mock-panel); color: var(--text); }
.shop-cart .icon { width: 14px; height: 14px; }
.shop-cart b {
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FF9F8A, #E8697F);
  font-size: 8px;
  font-weight: 700;
  color: #1E0A0D;
}
.shop-cart.is-bump b { animation: badge-bump .6s var(--ease-out); }
@keyframes badge-bump {
  0% { scale: 1; }
  40% { scale: 1.45; }
  100% { scale: 1; }
}
.shop-body { display: grid; grid-template-columns: 168px 1fr; gap: 16px; padding: 14px; }
.shop-media {
  position: relative;
  height: 210px;
  overflow: hidden;
  border: 1px solid rgb(var(--tint-rgb) / .07);
  border-radius: 12px;
  background: radial-gradient(circle at 50% 32%, rgba(255, 159, 138, .3), transparent 60%), linear-gradient(180deg, #FFF6F2, #F6EAE5);
}
.shop-orb {
  position: absolute;
  top: 34px;
  left: 50%;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF4EC 0%, #FFC2A8 24%, #E8697F 68%, #8C3A55 100%);
  box-shadow: 0 0 44px rgba(255, 159, 138, .45), inset -8px -10px 20px rgba(0, 0, 0, .25);
  translate: -50% 0;
  transition: scale .7s var(--ease-out);
}
@media (hover: hover) {
  .svc-shop:hover .shop-orb { scale: 1.05; }
}
.shop-stand { position: absolute; top: 126px; left: 50%; width: 6px; height: 44px; border-radius: 2px; background: linear-gradient(180deg, #D8DBE5, #8E93A3); translate: -50% 0; }
.shop-stand::after { content: ''; position: absolute; bottom: -6px; left: 50%; width: 58px; height: 10px; border-radius: 50%; background: linear-gradient(180deg, #C9CDD8, #737888); translate: -50% 0; }
.shop-fly {
  position: absolute;
  top: 76px;
  left: 78px;
  z-index: 3;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FFC2A8;
  box-shadow: 0 0 14px #FF9F8A;
  opacity: 0;
}
.shop.is-adding .shop-fly { animation: cart-fly .85s var(--ease-in-out); }
@keyframes cart-fly {
  0% { opacity: 1; translate: 0 0; scale: 1; }
  100% { opacity: .2; translate: var(--fly-x, 272px) var(--fly-y, -110px); scale: .35; }
}
.shop-info { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.shop-crumb { font-size: 8px; color: var(--text-3); }
.shop-name { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.shop-price { font-size: 14px; font-weight: 650; color: var(--text); }
.shop-ship { display: flex; align-items: center; gap: 5px; font-size: 8.5px; color: var(--success); }
.shop-ship .icon { width: 10px; height: 10px; stroke-width: 2.4; }
.shop-swatches { display: flex; gap: 7px; margin-block: 4px; }
.shop-swatches i { width: 14px; height: 14px; border-radius: 50%; background: #E8697F; }
.shop-swatches i:nth-child(2) { background: #C9CDD8; }
.shop-swatches i:nth-child(3) { border: 1px solid rgb(var(--tint-rgb) / .28); background: #2E3240; }
.shop-swatches i.is-active { box-shadow: 0 0 0 2px var(--mock-screen), 0 0 0 3px #FF9F8A; }
.shop-add {
  position: relative;
  display: grid;
  place-items: center;
  height: 30px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 9px;
  background: var(--text);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-on-light);
  transition: background-color .4s;
}
.shop-add .t1,
.shop-add .t2 { display: flex; grid-area: 1 / 1; align-items: center; gap: 5px; transition: translate .5s var(--ease-out), opacity .35s; }
.shop-add .t2 { opacity: 0; translate: 0 120%; }
.shop-add .icon { width: 11px; height: 11px; stroke-width: 2.4; }
.shop.is-added .shop-add { background: var(--success); }
.shop.is-added .t1 { opacity: 0; translate: 0 -120%; }
.shop.is-added .t2 { opacity: 1; translate: 0 0; }
.shop-secure { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 8px; color: var(--text-3); }
.shop-secure .icon { width: 9px; height: 9px; }
.shop-toast {
  position: absolute;
  bottom: 12px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid rgb(var(--tint-rgb) / .14);
  border-radius: 999px;
  background: var(--mock-panel);
  font-size: 9px;
  color: var(--text);
  white-space: nowrap;
  opacity: 0;
  translate: -50% 20px;
  transition: translate .5s var(--ease-out), opacity .4s;
}
.shop.is-added .shop-toast { opacity: 1; translate: -50% 0; }
.shop-toast .icon { width: 11px; height: 11px; color: var(--success); stroke-width: 2.4; }

/* Servicio app móvil */
.appdemo { position: absolute; inset: 0; }
.appdemo-phone { position: absolute; top: 4px; left: 34px; width: 148px; height: 292px; padding: 5px; border-radius: 26px; }
.appdemo-phone .ui-phone-screen { border-radius: 21px; }
.appdemo-screens { position: absolute; inset: 26px 0 0; }
.appdemo-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 6px 10px 10px;
  opacity: 0;
  translate: 26px 0;
  transition: opacity .55s var(--ease-out), translate .7s var(--ease-out);
}
.appdemo-screen.is-active { opacity: 1; translate: 0 0; }
.appdemo-screen.is-leaving { opacity: 0; translate: -26px 0; }
.appdemo-screen > b { font-family: var(--font-display); font-size: 13px; line-height: 1.2; text-align: center; color: var(--text); }
.scr-welcome .ui-line { height: 5px; margin-inline: auto; }
.scr-orb {
  width: 72px;
  height: 72px;
  margin: 18px auto 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #E6F7F3, #7FD1C7 35%, #2F7F86 82%);
  box-shadow: 0 0 34px rgba(127, 209, 199, .45);
}
.scr-btn { margin-top: auto; padding: 8px; border-radius: 10px; background: #7FD1C7; text-align: center; font-size: 9px; font-style: normal; font-weight: 700; color: #06201C; }
.scr-btn.is-ghost { border: 1px solid rgb(var(--tint-rgb) / .21); background: transparent; color: var(--text); }
.scr-dots { display: flex; justify-content: center; gap: 4px; }
.scr-dots i { width: 5px; height: 5px; border-radius: 3px; background: rgb(var(--tint-rgb) / .28); }
.scr-dots i.is-active { width: 12px; background: #7FD1C7; }
.scr-search { display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 8px; background: var(--mock-panel); font-size: 8px; color: var(--text-3); }
.scr-search .icon { width: 10px; height: 10px; }
.scr-item { display: flex; align-items: center; gap: 8px; padding: 7px; border: 1px solid rgb(var(--tint-rgb) / .07); border-radius: 10px; background: var(--mock-panel); }
.scr-item i { width: 24px; height: 24px; flex: none; border-radius: 8px; background: linear-gradient(135deg, #7FD1C7, #4FA3B8); }
.scr-item i.v2 { background: linear-gradient(135deg, #A9D2F5, #D4E6F7); }
.scr-item i.v3 { background: linear-gradient(135deg, #F2C46D, #E58F6B); }
.scr-item b { display: block; font-size: 9px; color: var(--text); }
.scr-item small { font-size: 7.5px; color: var(--text-3); }
.scr-home .app-tabs { position: absolute; right: 0; bottom: 0; left: 0; }
.scr-home .app-tabs .icon.is-active { color: #2F9C93; }
.scr-check {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 28px auto 6px;
  border-radius: 50%;
  background: rgb(var(--success-rgb) / .12);
  box-shadow: 0 0 0 8px rgb(var(--success-rgb) / .06);
  color: var(--success);
}
.scr-check .icon { width: 26px; height: 26px; stroke-width: 2.2; }
.scr-done small { font-size: 8.5px; text-align: center; color: var(--text-2); }
.scr-summary { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 10px; border-radius: 10px; background: var(--mock-panel); }
.appdemo-notif {
  position: absolute;
  top: 30px;
  left: 210px;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 214px;
  padding: 11px;
  border: 1px solid rgb(var(--tint-rgb) / .11);
  border-radius: 14px;
  background: var(--mock-panel);
  box-shadow: 0 20px 40px -16px rgba(4, 20, 30, .3);
  font-size: 9px;
  color: var(--text-2);
  transition: translate .7s var(--ease-out), opacity .5s;
}
.appdemo-notif b { display: block; font-size: 10px; color: var(--text); }
.appdemo.is-notif-off .appdemo-notif { opacity: 0; translate: 0 -10px; }
.appdemo-card {
  position: absolute;
  top: 126px;
  left: 230px;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 194px;
  padding: 11px;
  border: 1px solid rgb(var(--accent-rgb) / .22);
  border-radius: 14px;
  background: var(--mock-panel);
  font-size: 8.5px;
  color: var(--text-3);
}
.appdemo-card::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  width: 46px;
  border-top: 1px dashed rgb(var(--accent-rgb) / .4);
}
.appdemo-card b { display: block; font-size: 10px; color: var(--text); }
.appdemo-card-ico { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 9px; background: var(--accent-soft); color: var(--accent-strong); }
.appdemo-card-ico .icon { width: 15px; height: 15px; }
.appdemo-os { position: absolute; top: 212px; left: 230px; display: flex; gap: 6px; }
.appdemo-os span { padding: 5px 11px; border: 1px solid rgb(var(--tint-rgb) / .12); border-radius: 999px; background: var(--surface); font-size: 9px; color: var(--text-2); }

/* Servicio plataformas: roles y permisos */
.roles { position: absolute; inset: 0; }
.roles-list { position: absolute; top: 40px; left: 14px; display: flex; flex-direction: column; gap: 32px; width: 182px; }
.role-card {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 52px;
  padding: 0 12px;
  border: 1px solid rgb(var(--tint-rgb) / .1);
  border-radius: 14px;
  background: var(--surface);
  opacity: .55;
  transition: opacity .45s, border-color .45s, background-color .45s, box-shadow .45s;
}
.role-card b { display: block; font-family: var(--font-display); font-size: 10.5px; color: var(--text); }
.role-card small { font-size: 8.5px; color: var(--text-3); }
.roles[data-role="admin"] [data-role-card="admin"],
.roles[data-role="equipo"] [data-role-card="equipo"],
.roles[data-role="cliente"] [data-role-card="cliente"] {
  border-color: rgb(var(--accent-rgb) / .45);
  background: rgb(var(--accent-rgb) / .06);
  box-shadow: 0 0 30px -10px rgb(var(--accent-rgb) / .5);
  opacity: 1;
}
.roles-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.roles-links path { fill: none; stroke: rgb(var(--tint-rgb) / .12); stroke-width: 1.2; transition: stroke .45s; }
.roles[data-role="admin"] [data-role-link="admin"],
.roles[data-role="equipo"] [data-role-link="equipo"],
.roles[data-role="cliente"] [data-role-link="cliente"] {
  stroke: rgb(var(--accent-rgb) / .75);
  stroke-dasharray: 3 4;
  animation: dash-flow 1.2s linear infinite;
}
.roles-panel { position: absolute; top: 34px; left: 254px; width: 332px; height: 232px; }
.roles-modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; }
.mod {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 10px;
  border: 1px solid rgb(var(--tint-rgb) / .1);
  border-radius: 11px;
  background: var(--mock-panel);
  transition: opacity .45s, border-color .45s, background-color .45s, filter .45s;
}
.mod .icon { width: 15px; height: 15px; color: var(--accent-strong); }
.mod b { font-size: 9.5px; font-weight: 600; color: var(--text); }
.mod .mod-lock { position: absolute; top: 9px; right: 9px; width: 11px; height: 11px; color: var(--text-3); opacity: 0; transition: opacity .3s; }
.mod.is-locked { border-style: dashed; background: transparent; opacity: .4; filter: saturate(0); }
.mod.is-locked .mod-lock { opacity: 1; }
.roles-status { padding: 0 12px; font-size: 9px; color: var(--text-3); }

/* ==========================================================================
   PORTFOLIO · mockups conceptuales (artboard 720x440)
   ========================================================================== */
.pm::before {
  content: '';
  position: absolute;
  inset: 8% 10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--pm-glow, rgb(var(--accent-rgb) / .22)), transparent);
  pointer-events: none;
}
.pm-float { position: absolute; z-index: 4; }
.pm-phone { position: absolute; z-index: 3; }

/* Sitio corporativo (marca cálida) */
.pm-web { --pm-glow: rgba(242, 196, 109, .16); }
.pm-web .pm-laptop { top: 30px; left: 58px; width: 520px; }
.pm-web .pm-laptop-lid { height: 334px; }
.pm-web .pm-phone { top: 118px; left: 540px; width: 150px; height: 300px; }
.pw {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: 12px 16px;
  background: radial-gradient(60% 50% at 85% 0%, rgba(242, 196, 109, .09), transparent 70%);
}
.pw-nav { display: flex; align-items: center; gap: 12px; }
.pw-logo { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 11px; font-weight: 700; color: var(--text); }
.pw-logo i { width: 13px; height: 13px; border-radius: 4px; background: linear-gradient(135deg, #F2C46D, #D9925B); }
.pw-links { display: flex; gap: 14px; margin-left: auto; font-size: 8.5px; color: var(--text-2); }
.pw-links i { font-style: normal; }
.pw-btn { padding: 5px 10px; border-radius: 999px; background: linear-gradient(135deg, #F2C46D, #D9925B); font-size: 8px; font-weight: 600; color: #1E1304; }
.pw-burger { display: flex; flex-direction: column; gap: 3px; width: 14px; margin-left: auto; }
.pw-burger i { height: 1.5px; border-radius: 1px; background: var(--text); }
.pw-hero { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 16px; }
.pw-copy { display: flex; flex-direction: column; gap: 8px; }
.pw-kicker { font-size: 7.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #B7791F; }
.pw-h { font-family: var(--font-display); font-size: 27px; font-weight: 700; line-height: 1.02; letter-spacing: -.03em; color: var(--text); }
.pw-p { max-width: 32ch; font-size: 9px; color: var(--text-2); }
.pw-ctas { display: flex; gap: 6px; margin-top: 4px; }
.pw-ctas i { padding: 6px 11px; border: 1px solid rgb(var(--tint-rgb) / .2); border-radius: 999px; font-size: 8px; font-style: normal; color: var(--text); }
.pw-ctas i.is-solid { border-color: transparent; background: linear-gradient(135deg, #F2C46D, #D9925B); font-weight: 600; color: #1E1304; }
.pw-art { position: relative; height: 152px; overflow: hidden; border-radius: 14px; background: linear-gradient(160deg, #FBF3E7, #F0E3D2); }
.pw-art i { position: absolute; bottom: 0; border-radius: 999px 999px 0 0; background: linear-gradient(180deg, rgba(242, 196, 109, .5), rgba(217, 146, 91, .08)); }
.pw-art i:nth-child(1) { left: 12%; width: 22%; height: 60%; }
.pw-art i:nth-child(2) { left: 40%; width: 25%; height: 82%; background: linear-gradient(180deg, rgba(217, 146, 91, .55), rgba(242, 196, 109, .1)); }
.pw-art i:nth-child(3) { left: 72%; width: 18%; height: 46%; }
.pw-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pw-cards span { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid rgb(var(--tint-rgb) / .08); border-radius: 12px; background: var(--mock-panel); }
.pw-cards i { width: 18px; height: 18px; border-radius: 6px; background: rgba(242, 196, 109, .22); }
.pw-cards b { font-size: 9.5px; color: var(--text); }
.pw-cards em { display: block; width: 80%; height: 5px; border-radius: 3px; background: rgb(var(--tint-rgb) / .11); }
.pw-mobile { position: relative; gap: 9px; height: calc(100% - 26px); padding: 6px 12px 12px; }
.pw-mobile .pw-art { height: 92px; }
.pw-mobile .pw-h { font-size: 17px; }
.pw-mobile .pw-p { font-size: 8px; }
.pw-wa {
  position: absolute;
  right: 12px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #4FBF8B;
  box-shadow: 0 8px 20px -6px rgba(79, 191, 139, .6);
  color: #062014;
}
.pw-wa .icon { width: 16px; height: 16px; }

/* Tienda online (marca coral) */
.pm-shop { --pm-glow: rgba(255, 159, 138, .14); }
.pm-shop .pm-browser { position: absolute; top: 28px; left: 30px; width: 540px; height: 372px; }
.ps { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px; }
.ps-top { display: flex; align-items: center; gap: 12px; }
.ps-logo { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 11px; font-weight: 700; color: var(--text); }
.ps-logo i { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, #FF9F8A, #E8697F); }
.ps-search { display: flex; flex: 1; align-items: center; gap: 6px; max-width: 220px; height: 24px; margin-left: auto; padding: 0 9px; border-radius: 7px; background: var(--mock-panel); font-size: 8.5px; color: var(--text-3); }
.ps-search .icon { width: 10px; height: 10px; }
.ps-icons { display: flex; align-items: center; gap: 10px; color: var(--text-2); }
.ps-icons .icon { width: 14px; height: 14px; }
.ps-cart { position: relative; color: var(--text); }
.ps-cart b { position: absolute; top: -6px; right: -8px; display: grid; place-items: center; min-width: 14px; height: 14px; border-radius: 999px; background: #E8697F; font-size: 7.5px; color: #1E0A0D; }
.ps-cats { display: flex; gap: 6px; }
.ps-cats i { padding: 4px 10px; border: 1px solid rgb(var(--tint-rgb) / .11); border-radius: 999px; font-size: 8px; font-style: normal; color: var(--text-2); }
.ps-cats i.is-active { border-color: rgba(255, 159, 138, .45); background: rgba(255, 159, 138, .1); color: var(--text); }
.ps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ps-item { display: flex; flex-direction: column; gap: 5px; }
.ps-img {
  position: relative;
  display: block;
  height: 132px;
  overflow: hidden;
  border: 1px solid rgb(var(--tint-rgb) / .07);
  border-radius: 12px;
  background: radial-gradient(circle at 50% 30%, #FFFFFF, transparent 60%), linear-gradient(180deg, #F7F4F2, #ECE7E3);
}
.ps-img b { position: absolute; left: 50%; translate: -50% 0; }
.ps-img.v1 b { top: 22%; width: 48%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF4EC, #FFC2A8 24%, #E8697F 68%, #8C3A55); box-shadow: 0 0 24px rgba(255, 159, 138, .35); }
.ps-img.v2 b { bottom: 20%; width: 44%; height: 50%; border-radius: 12px 12px 4px 4px; background: linear-gradient(180deg, #C9CDD8, #8E93A3); }
.ps-img.v2 b::after { content: ''; position: absolute; top: 100%; right: 10%; left: 10%; height: 12%; border-right: 3px solid #6D7282; border-left: 3px solid #6D7282; }
.ps-img.v3 b { bottom: 14%; width: 30%; height: 58%; border-radius: 40% 40% 28% 28% / 30% 30% 20% 20%; background: linear-gradient(180deg, #A9D8CF, #4F9A93); }
.ps-img.v4 b { top: 40%; width: 62%; height: 8%; border-radius: 4px; background: #D6B48A; }
.ps-img.v4 b::after { content: ''; position: absolute; top: 100%; left: 45%; width: 10%; height: 420%; background: #9C7B57; }
.ps-name { font-size: 9.5px; font-weight: 600; color: var(--text); }
.ps-price { font-size: 9px; color: var(--text-2); }
.pm-shop .pm-phone { top: 86px; left: 548px; width: 152px; height: 306px; }
.pc { display: flex; flex-direction: column; gap: 7px; height: calc(100% - 26px); padding: 4px 10px 12px; }
.pc-title { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--text); }
.pc-item { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 10px; background: var(--mock-panel); }
.pc-item .ps-img { width: 34px; height: 34px; flex: none; border-radius: 8px; }
.pc-item b { display: block; font-size: 8.5px; color: var(--text); }
.pc-item small { font-size: 7.5px; color: var(--text-3); }
.pc-sum { display: flex; justify-content: space-between; font-size: 8px; color: var(--text-2); }
.pc-sum.is-total { padding-top: 6px; border-top: 1px solid rgb(var(--tint-rgb) / .11); font-size: 9.5px; font-weight: 700; color: var(--text); }
.pc-label { margin-top: 2px; font-size: 7.5px; color: var(--text-3); }
.pc-pay { display: flex; gap: 5px; }
.pc-pay i { display: flex; align-items: center; gap: 4px; padding: 5px 7px; border: 1px solid rgb(var(--tint-rgb) / .14); border-radius: 8px; font-size: 7.5px; font-style: normal; color: var(--text-2); }
.pc-pay i.is-active { border-color: #FF9F8A; color: var(--text); }
.pc-pay .icon { width: 9px; height: 9px; }
.pc-btn { margin-top: auto; padding: 8px; border-radius: 10px; background: linear-gradient(135deg, #FF9F8A, #E8697F); text-align: center; font-size: 9px; font-weight: 700; color: #1E0A0D; }
.pm-float-order { top: 356px; left: 64px; }

/* App de reservas (marca turquesa) */
.pm-mobile { --pm-glow: rgba(127, 209, 199, .16); }
.pm-mobile .pm-phone { width: 168px; height: 340px; }
.pm-mobile .p1 { top: 64px; left: 92px; }
.pm-mobile .p2 { top: 30px; left: 276px; z-index: 4; width: 176px; height: 360px; }
.pm-mobile .p3 { top: 64px; left: 468px; }
.pa { display: flex; flex-direction: column; gap: 8px; height: calc(100% - 26px); padding: 4px 11px 10px; }
.pa-login { text-align: center; }
.pa-orb { width: 52px; height: 52px; margin: 16px auto 4px; border-radius: 16px; background: linear-gradient(135deg, #7FD1C7, #4FA3B8); box-shadow: 0 10px 30px -8px rgba(127, 209, 199, .6); }
.pa-h { font-family: var(--font-display); font-size: 14px; color: var(--text); }
.pa-p { font-size: 8px; color: var(--text-2); }
.pa-input { padding: 8px 9px; border: 1px solid rgb(var(--tint-rgb) / .14); border-radius: 9px; text-align: left; font-size: 8px; color: var(--text-3); }
.pa-btn { padding: 9px; border-radius: 10px; background: #7FD1C7; font-size: 9px; font-weight: 700; color: #06201C; }
.pa-alt { font-size: 7.5px; color: var(--text-3); }
.pa-alt b { color: #2F7F86; }
.pa-cal { padding: 8px; border: 1px solid rgb(var(--tint-rgb) / .08); border-radius: 12px; background: var(--mock-panel); }
.pa-month { display: block; margin-bottom: 6px; font-size: 9px; font-weight: 600; color: var(--text); }
.pa-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.pa-cal-grid i { font-size: 6.5px; font-style: normal; color: var(--text-3); }
.pa-cal-grid b { padding: 3px 0; border-radius: 5px; font-size: 7.5px; font-weight: 500; color: var(--text-2); }
.pa-cal-grid b.is-off { color: rgb(var(--tint-rgb) / .28); }
.pa-cal-grid b.is-active { background: #7FD1C7; font-weight: 700; color: #06201C; }
.pm-mobile .app-slots .is-active { border-color: rgba(127, 209, 199, .55); background: rgba(127, 209, 199, .16); }
.pm-mobile .app-cta { background: #7FD1C7; color: #06201C; }
.pa-row { display: flex; align-items: center; gap: 8px; padding: 7px; border: 1px solid transparent; border-radius: 10px; background: var(--mock-panel); }
.pa-row.is-next { border-color: rgba(127, 209, 199, .3); background: rgba(127, 209, 199, .09); }
.pa-row b { display: block; font-size: 8.5px; color: var(--text); }
.pa-row small { font-size: 7.5px; color: var(--text-3); }
.pa-date { display: flex; flex-direction: column; align-items: center; width: 28px; flex: none; font-size: 6.5px; letter-spacing: .06em; color: var(--text-3); }
.pa-date b { font-size: 12px; letter-spacing: 0; }
.pa-toggle { display: flex; align-items: center; justify-content: space-between; padding: 7px 2px; font-size: 8px; color: var(--text-2); }
.pa-toggle i { position: relative; width: 24px; height: 14px; border-radius: 999px; background: rgb(var(--tint-rgb) / .17); }
.pa-toggle i.is-on { background: #7FD1C7; }
.pa-toggle i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.pa-toggle i.is-on::after { left: 12px; }
.pm-mobile .app-tabs .icon.is-active { color: #2F9C93; }

/* Sistema de gestión */
.pm-mgmt { --pm-glow: rgb(var(--accent-rgb) / .2); }
.pm-mgmt .pm-laptop { top: 24px; left: 34px; width: 540px; }
.pm-mgmt .pm-laptop-lid { height: 346px; }
.pg { display: flex; height: 100%; }
.pg-side { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 40px; padding: 12px 0; border-right: 1px solid rgb(var(--tint-rgb) / .07); }
.pg-side i { width: 18px; height: 18px; border-radius: 6px; background: rgb(var(--tint-rgb) / .08); }
.pg-side i.is-active { background: rgb(var(--accent-rgb) / .32); }
.pg-main { display: flex; flex: 1; flex-direction: column; gap: 10px; min-width: 0; padding: 12px 14px; }
.pg-head { display: flex; align-items: center; justify-content: space-between; }
.pg-head b { font-family: var(--font-display); font-size: 12px; color: var(--text); }
.pg-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.pg-kpis span { padding: 8px; border: 1px solid rgb(var(--tint-rgb) / .07); border-radius: 9px; background: var(--mock-panel); }
.pg-kpis small { display: block; font-size: 7.5px; color: var(--text-3); }
.pg-kpis b { font-family: var(--font-display); font-size: 11px; color: var(--text); }
.pg-kpis b.is-warn { color: var(--warning); }
.pg-row { display: grid; grid-template-columns: 1.5fr 1fr; gap: 8px; }
.pg-chart { padding: 8px; border: 1px solid rgb(var(--tint-rgb) / .07); border-radius: 9px; background: var(--mock-panel); }
.pg-chart svg { width: 100%; height: 112px; overflow: visible; }
.pg-bars { fill: none; stroke: rgb(var(--accent-rgb) / .22); stroke-width: 14; }
.pg-list { display: flex; flex-direction: column; gap: 7px; padding: 9px; border: 1px solid rgb(var(--tint-rgb) / .07); border-radius: 9px; background: var(--mock-panel); }
.pg-list span { display: flex; align-items: center; gap: 6px; font-size: 8px; color: var(--text-2); }
.pg-list i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--success); }
.pg-list i.is-warn { background: var(--warning); }
.pg-list b { margin-left: auto; color: var(--text); }
.pg-table { display: flex; flex-direction: column; gap: 6px; }
.pg-table span { height: 22px; border: 1px solid rgb(var(--tint-rgb) / .06); border-radius: 7px; background: var(--mock-panel); }
.pm-mgmt .pm-tablet { top: 112px; left: 484px; z-index: 3; width: 214px; height: 298px; }
.pt { display: flex; flex-direction: column; gap: 9px; height: 100%; padding: 14px 12px; }
.pt-title { font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--text); }
.pt-alert { display: flex; align-items: center; gap: 5px; padding: 7px; border-radius: 8px; background: rgb(var(--warning-rgb) / .14); font-size: 8px; color: var(--warning); }
.pt-alert .icon { width: 11px; height: 11px; }
.pt-item { display: flex; flex-direction: column; gap: 4px; font-size: 8.5px; color: var(--text-2); }
.pt-item i { position: relative; display: block; height: 5px; overflow: hidden; border-radius: 5px; background: rgb(var(--tint-rgb) / .08); }
.pt-item i::after { content: ''; position: absolute; inset: 0; width: calc(var(--v) * 100%); border-radius: inherit; background: var(--success); }
.pt-item i.is-low::after { background: var(--warning); }
.pt-btn { margin-top: auto; padding: 8px; border-radius: 9px; background: var(--text); text-align: center; font-size: 8.5px; font-weight: 700; color: var(--text-on-light); }

/* Plataforma con roles (marca violeta) */
.pm-platform { --pm-glow: rgba(183, 165, 255, .16); }
.pm-platform .pm-browser { position: absolute; top: 26px; left: 26px; width: 590px; height: 360px; }
.pp { display: grid; flex: 1; grid-template-columns: 112px 1fr 168px; min-height: 0; }
.pp-side { display: flex; flex-direction: column; gap: 4px; padding: 12px 8px; border-right: 1px solid rgb(var(--tint-rgb) / .07); }
.pp-brand { display: flex; align-items: center; gap: 6px; margin: 0 4px 10px; font-family: var(--font-display); font-size: 10.5px; color: var(--text); }
.pp-brand i { width: 12px; height: 12px; border-radius: 4px; background: linear-gradient(135deg, #B7A5FF, #8B6FE8); }
.pp-side span { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 7px; font-size: 8.5px; color: var(--text-2); }
.pp-side .icon { width: 11px; height: 11px; }
.pp-side span.is-active { background: rgba(183, 165, 255, .12); color: var(--text); }
.pp-list { display: flex; flex-direction: column; gap: 7px; padding: 12px; border-right: 1px solid rgb(var(--tint-rgb) / .07); }
.pp-list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.pp-list-head b { font-family: var(--font-display); font-size: 11px; color: var(--text); }
.pp-req { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid rgb(var(--tint-rgb) / .07); border-radius: 10px; background: var(--mock-panel); }
.pp-req.is-active { border-color: rgba(183, 165, 255, .4); background: rgba(183, 165, 255, .07); }
.pp-req b { display: block; font-size: 8.5px; color: var(--text); }
.pp-req small { font-size: 7.5px; color: var(--text-3); }
.pp-req .ui-pill { margin-left: auto; }
.pp-detail { display: flex; flex-direction: column; gap: 5px; padding: 12px; }
.pp-detail > b { font-family: var(--font-display); font-size: 10px; color: var(--text); }
.pp-detail > small { font-size: 7.5px; color: var(--text-3); }
.pp-steps { position: relative; display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding-left: 15px; }
.pp-steps::before { content: ''; position: absolute; top: 5px; bottom: 5px; left: 4px; width: 1px; background: rgb(var(--tint-rgb) / .14); }
.pp-steps li { position: relative; font-size: 8px; color: var(--text-3); }
.pp-steps li::before { content: ''; position: absolute; top: 2px; left: -15px; width: 9px; height: 9px; border: 1px solid rgb(var(--tint-rgb) / .28); border-radius: 50%; background: var(--mock-screen); }
.pp-steps li.is-done { color: var(--text-2); }
.pp-steps li.is-done::before { border-color: var(--success); background: var(--success); }
.pp-steps li.is-current { color: var(--text); }
.pp-steps li.is-current::before { border-color: #8B6FE8; background: #8B6FE8; box-shadow: 0 0 0 3px rgba(183, 165, 255, .2); }
.pp-btn { margin-top: auto; padding: 7px; border: 1px solid rgba(183, 165, 255, .3); border-radius: 8px; background: rgba(183, 165, 255, .14); text-align: center; font-size: 8px; font-weight: 600; color: #6A4FD0; }
.pm-chat { top: 300px; left: 466px; flex-direction: column; align-items: stretch; gap: 7px; width: 226px; padding: 12px; white-space: normal; }
.pm-chat-title { display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 600; color: var(--text); }
.pm-chat-title .icon { width: 12px; height: 12px; color: #8B6FE8; }
.bubble { align-self: flex-start; max-width: 86%; padding: 7px 9px; border-radius: 10px 10px 10px 3px; background: rgb(var(--tint-rgb) / .08); font-size: 8.5px; color: var(--text-2); }
.bubble.is-me { align-self: flex-end; border-radius: 10px 10px 3px 10px; background: rgba(183, 165, 255, .18); color: var(--text); }

/* ==========================================================================
   Composiciones compactas (pantallas angostas)
   main.js agrega [data-compact] cuando el espacio disponible es reducido.
   ========================================================================== */
.artboard[data-compact] { overflow: hidden; }
/* En la app nada se sale del marco: se deja ver la sombra del teléfono sin el corte recto del recorte. */
.artboard[data-compact]:has(> .appdemo) { overflow: visible; }

/* Web: el marco ocupa casi todo el ancho */
.artboard[data-compact] .devframe { --df-w: 384px; }
.artboard[data-compact] .devframe[data-device="tablet"] { --df-w: 300px; }
.artboard[data-compact] .devframe[data-device="mobile"] { --df-w: 190px; }

/* Tienda */
.artboard[data-compact] .shop { right: 0; left: 0; --fly-x: 256px; --fly-y: -114px; }
.artboard[data-compact] .shop-body { grid-template-columns: 128px 1fr; gap: 12px; }
.artboard[data-compact] .shop-orb { top: 40px; width: 78px; height: 78px; }
.artboard[data-compact] .shop-stand { top: 118px; }
.artboard[data-compact] .shop-fly { left: 58px; }
.artboard[data-compact] .shop-name { font-size: 15px; }

/* App */
.artboard[data-compact] .appdemo-phone { left: 8px; }
.artboard[data-compact] .appdemo-notif { left: 170px; width: 186px; }
.artboard[data-compact] .appdemo-card { left: 184px; width: 172px; }
.artboard[data-compact] .appdemo-card::before { width: 28px; }
.artboard[data-compact] .appdemo-os { left: 184px; }

/* Plataformas: solo el panel; el rol se elige con los botones de abajo */
.artboard[data-compact] .roles-list,
.artboard[data-compact] .roles-links { display: none; }
.artboard[data-compact] .roles-panel { top: 4px; left: 9px; }

/* Portfolio: el dispositivo móvil al frente y el resto recortado detrás */
.pm[data-compact] .pm-laptop,
.pm[data-compact] .pm-browser { transform-origin: 0 0; scale: .78; }
.pm-web[data-compact] .pm-laptop { top: 30px; left: 122px; }
.pm-web[data-compact] .pm-phone { top: 22px; left: 14px; }
.pm-shop[data-compact] .pm-browser { top: 24px; left: 124px; }
.pm-shop[data-compact] .pm-phone { top: 18px; left: 14px; }
.pm-shop[data-compact] .pm-float-order { top: 280px; left: 96px; }
.pm-mobile[data-compact] .p1 { top: 44px; left: -104px; }
.pm-mobile[data-compact] .p2 { top: 10px; left: 82px; }
.pm-mobile[data-compact] .p3 { top: 44px; left: 276px; }
.pm-mgmt[data-compact] .pm-laptop { top: 24px; left: 120px; }
.pm-mgmt[data-compact] .pm-tablet { top: 24px; left: 12px; }
.pm-platform[data-compact] .pm-browser { top: 18px; left: 12px; scale: .72; }
.pm-platform[data-compact] .pm-chat { top: 214px; left: 116px; width: 210px; }