/* Eleva o peso base de 300 → 400 só na página de Tracking: algumas seções
   têm fundo branco/claro, e weight 300 fica difícil de ler nesses contextos.
   Escopado via .page-tracking para não vazar para workforce/, que também
   carrega este CSS para reusar componentes de dashboard. */
body.page-tracking { font-weight: 400; }

/* ===================== TRACKING HERO ===================== */
#tr-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--bg);
  overflow: hidden;
}

#trackingCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  /* Promote to its own compositing layer — RAF animates the canvas every frame,
     so isolating it prevents the rest of the hero from repainting alongside. */
  will-change: transform;
}

.tr-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 70% at 10% 60%, rgba(5,5,8,.65) 0%, transparent 70%),
    radial-gradient(ellipse 70% 80% at 50% 100%, rgba(5,5,8,.92) 0%, transparent 62%),
    radial-gradient(ellipse 50% 50% at 100% 0%, rgba(5,5,8,.55) 0%, transparent 65%);
}

.tr-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 32px 60px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 80px;
  align-items: center;
}

/* — Text side — */
.tr-eyebrow {
  opacity: 0;
  animation: fade-up .7s var(--ease) .3s both;
}

.tr-title {
  font-size: clamp(38px, 5.5vw, 72px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.025em;
  margin: 16px 0 20px;
  color: #fff;
}

.tr-title .reveal-line {
  display: block;
}

.tr-sub-accent {
  color: rgba(255,255,255,.25);
  font-weight: 400;
}

.tr-lead {
  font-size: 15px;
  font-weight: 400;
  color: #9095a5;
  line-height: 1.7;
  margin-bottom: 24px;
  max-width: 480px;
}

.tr-feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}

.tr-feature-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 400;
  color: #9ea3b4;
}

.tr-feat-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(0,204,255,.5);
}

.tr-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* — Dashboard card — */
.tr-hero-dash {
  opacity: 0;
  animation: fade-up .9s var(--ease) .8s both;
  /* JS writes style.transform every RAF frame for the mouse parallax —
     promote to its own layer so the rest of the hero doesn't repaint. */
  will-change: transform;
}

.tr-dashboard {
  background: rgba(8,8,18,.94);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  padding: 20px;
  box-shadow:
    0 0 0 1px rgba(0,102,255,.08),
    0 40px 100px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.tr-dash-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.tr-dash-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 400;
  color: #22c55e;
  letter-spacing: .08em;
}

.live-pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  animation: pulse 1.8s ease-in-out infinite;
}

.tr-dash-label {
  flex: 1;
  font-size: 12px;
  font-weight: 400;
  color: #b3b8c8;
  letter-spacing: .08em;
}

.tr-dash-time {
  font-size: 10px;
  font-weight: 400;
  color: #75798a;
  font-variant-numeric: tabular-nums;
}

.tr-dash-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.tr-metric-block {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 12px;
  padding: 14px;
}

.tr-metric-label {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #75798a;
  margin-bottom: 8px;
}

.tr-metric-val {
  font-size: 28px;
  font-weight: 400;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: 10px;
}

.tr-metric-val small {
  font-size: 14px;
  color: #82869a;
}

.tr-progress {
  height: 2px;
  background: rgba(255,255,255,.06);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 6px;
}

.tr-progress-fill {
  height: 100%;
  width: var(--w);
  background: linear-gradient(90deg, var(--blue), rgba(0,102,255,.6));
  border-radius: 2px;
  transition: width 1.5s cubic-bezier(.16,1,.3,1);
}

.tr-fill-cyan {
  background: linear-gradient(90deg, var(--cyan), rgba(0,204,255,.6));
}

.tr-metric-delta {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .04em;
}

.tr-up { color: #22c55e; }

/* Mini chart */
.tr-minichart-wrap {
  background: rgba(255,255,255,.015);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 14px;
}

#miniChart {
  width: 100%;
  height: 56px;
  display: block;
}

/* Dashboard footer pills */
.tr-dash-footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tr-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 400;
  padding: 5px 9px;
  border-radius: 6px;
  letter-spacing: .04em;
}

.tr-status-pill.warning {
  background: rgba(255,170,0,.06);
  border: 1px solid rgba(255,170,0,.15);
  color: #ffaa00;
}

.tr-status-pill.ok {
  background: rgba(34,197,94,.06);
  border: 1px solid rgba(34,197,94,.15);
  color: #22c55e;
}

.tr-status-pill.muted {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  color: #82869a;
}

.s-pip {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.warning-pip { background: #ffaa00; animation: pulse 2s infinite; }
.ok-pip { background: #22c55e; animation: pulse 2.4s infinite; }
.off-pip { background: #444; }

/* Scroll hint */
.tr-scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 2;
  opacity: 0;
  animation: fade-up .6s var(--ease) 1.4s both;
}

.tr-scroll-hint span {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .25em;
  color: #787d8f;
  text-transform: uppercase;
}

/* ===================== CHALLENGES ===================== */
.tr-challenges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 72px;
}

.tr-challenge-card {
  padding: 36px 32px;
}

.tr-ch-icon {
  margin-bottom: 20px;
  opacity: .7;
}

.tr-ch-title {
  font-size: 17px;
  font-weight: 400;
  color: var(--l-text);
  margin-bottom: 12px;
  letter-spacing: -.01em;
  line-height: 1.4;
}

.tr-ch-text {
  font-size: 13px;
  font-weight: 400;
  color: var(--l-muted);
  line-height: 1.8;
  margin-bottom: 20px;
}

.tr-ch-solution {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #22c55e;
  line-height: 1.5;
  padding: 10px 14px;
  background: rgba(34,197,94,.04);
  border: 1px solid rgba(34,197,94,.1);
  border-radius: 10px;
}

.tr-ch-solution svg {
  flex-shrink: 0;
  margin-top: 2px;
  opacity: .8;
}

/* ===================== 3-STEP PROCESS ===================== */
.tr-steps {
  display: grid;
  grid-template-columns: 1fr 40px 1fr 40px 1fr;
  align-items: center;
  gap: 0;
  margin: 80px 0 64px;
}

.tr-step {
  position: relative;
  text-align: center;
  padding: 36px 24px 30px;
  background: #f4f4f7;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  transition: border-color .25s, background .25s;
}

.tr-step:hover {
  border-color: rgba(0,102,255,.22);
  background: #eef0f7;
}

.tr-step-num {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0;
  opacity: 1;
  margin: 0;
}

.tr-step-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(0,102,255,.07);
  border: 1px solid rgba(0,102,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px auto 18px;
  color: var(--blue);
  transition: background .3s, border-color .3s, box-shadow .3s;
}

.tr-step:hover .tr-step-icon {
  background: rgba(0,102,255,.12);
  border-color: rgba(0,102,255,.3);
  box-shadow: 0 0 24px rgba(0,102,255,.12);
}

.tr-step-icon-b {
  display: none;
}

.tr-step h3 {
  font-size: 15px;
  font-weight: 500;
  color: var(--l-text);
  margin-bottom: 10px;
  line-height: 1.4;
}

.tr-step p {
  font-size: 13px;
  font-weight: 400;
  color: var(--l-muted);
  line-height: 1.65;
}

.tr-step-line {
  width: auto;
  height: auto;
  background: none;
  margin: 0;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 400;
  color: rgba(0,102,255,.4);
  line-height: 1;
}

.tr-step-line::before {
  content: "→";
}

/* Status labels */
.status-ok      { color: #16a34a; font-weight: 500; }
.status-warn    { color: #dc2626; font-weight: 500; }
.status-neutral { color: #d97706; font-weight: 500; }

/* ===================== CRITERIA GRID ===================== */
.tr-criteria-header {
  text-align: center;
  margin: 72px 0 40px;
}

.tr-criteria-header h3 {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 400;
  color: var(--l-text);
  letter-spacing: -.02em;
}

.tr-criteria-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.tr-criterion {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  transition: border-color .3s, background .3s;
}

.tr-criterion:hover {
  background: rgba(0,102,255,.03);
  border-color: rgba(0,102,255,.12);
}

.tr-crit-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(0,102,255,.08);
  border: 1px solid rgba(0,102,255,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
}

.tr-criterion strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--l-text);
  margin-bottom: 6px;
}

.tr-criterion p {
  font-size: 12px;
  font-weight: 400;
  color: var(--l-muted);
  line-height: 1.7;
}

/* ===================== CARD ICON: PULSE LINE ===================== */
.pulse-line {
  stroke-dasharray: 120;
  stroke-dashoffset: 0;
}
.card:hover .pulse-line {
  animation: pulse-draw 2s ease-in-out infinite;
}
@keyframes pulse-draw {
  0% { stroke-dashoffset: 0; opacity: .7; }
  50% { stroke-dashoffset: -120; opacity: 1; }
  50.01% { stroke-dashoffset: 120; opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: .7; }
}

.card:hover .pulse-dot {
  animation: icon-node 1.5s ease-in-out infinite;
}

/* Bars hover */
.card:hover .bar {
  animation: bar-grow .8s ease-out both;
}
.card:hover .b1 { animation-delay: 0s; }
.card:hover .b2 { animation-delay: .1s; }
.card:hover .b3 { animation-delay: .2s; }
.card:hover .b4 { animation-delay: .15s; }
@keyframes bar-grow {
  from { opacity: 0; transform: scaleY(0); transform-origin: bottom; }
  to   { opacity: inherit; transform: scaleY(1); transform-origin: bottom; }
}

/* Radar sweep */
.card:hover .radar-sweep {
  transform-box: fill-box;
  transform-origin: 40px 30px;
  animation: radar-spin 3s linear infinite;
}
@keyframes radar-spin {
  to { transform: rotate(360deg); }
}

/* ===================== ASSINATURAS ===================== */
.tr-sig-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}

.tr-sig-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 32px;
}

.tr-sig-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--l-text);
  line-height: 1.6;
}

.tr-sig-check {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 6px;
  background: rgba(22,163,74,.12);
  border: 1px solid rgba(22,163,74,.32);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #15803d;
  margin-top: 1px;
}

/* Document card */
.tr-doc-card {
  background: rgba(8,8,18,.8);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(0,0,0,.5);
}

.tr-doc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 11px;
  font-weight: 400;
  color: #82869a;
  background: rgba(255,255,255,.01);
}

.tr-doc-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tr-doc-line {
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,.04);
}
.w80 { width: 80%; }
.w60 { width: 60%; }
.w90 { width: 90%; }
.w50 { width: 50%; }
.w75 { width: 75%; }

.tr-doc-signers {
  padding: 14px 20px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tr-doc-signer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.signer-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 500;
  color: #fff;
  flex-shrink: 0;
}

.muted-av {
  background: rgba(255,255,255,.08);
  color: #82869a;
}

.signer-info {
  flex: 1;
}

.signer-info strong {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #aaa;
  margin-bottom: 2px;
}

.s-status {
  font-size: 10px;
  font-weight: 400;
  padding: 2px 8px;
  border-radius: 4px;
}

.signed-badge {
  background: rgba(34,197,94,.08);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,.15);
}

.pending-badge {
  background: rgba(255,170,0,.06);
  color: #ffaa00;
  border: 1px solid rgba(255,170,0,.12);
}

/* ===================== DISPOSITIVOS ===================== */
.tr-devices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 72px;
}

/* Map visual inside card — SVG silhouette of Brazil with device dots */
.tr-map-visual {
  position: relative;
  height: 90px;
  margin: 20px 0 12px;
  border-radius: 10px;
  overflow: hidden;
}

.tr-map-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.tr-map-shape {
  fill: rgba(15, 20, 35, 0.04);
  stroke: rgba(15, 20, 35, 0.28);
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.tr-map-dot.online  { fill: #22c55e; }
.tr-map-dot.offline { fill: #9ca3af; }

.tr-map-ring {
  fill: none;
  stroke: #22c55e;
  stroke-width: 1;
  transform-origin: center;
  transform-box: fill-box;
  animation: tr-map-ping 2s ease-out infinite;
  vector-effect: non-scaling-stroke;
}

.tr-map-ring-delay { animation-delay: .8s; }

@keyframes tr-map-ping {
  0%   { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(3.5); opacity: 0;   }
}

/* Status visual inside card */
.tr-status-visual {
  margin: 20px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tr-status-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 10px;
}

.tr-hb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tr-hb-dot.on { background: #22c55e; animation: pulse 2s infinite; }
.tr-hb-dot.off { background: #333; }

.tr-hb-info {
  flex: 1;
  min-width: 0;
}

.tr-hb-name {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tr-hb-time {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: #75798a;
}

.tr-hb-badge {
  font-size: 10px;
  font-weight: 400;
  padding: 3px 8px;
  border-radius: 5px;
  flex-shrink: 0;
}

.tr-hb-badge.online { background: rgba(34,197,94,.08); color: #22c55e; border: 1px solid rgba(34,197,94,.15); }
.tr-hb-badge.offline { background: rgba(255,255,255,.03); color: #75798a; border: 1px solid rgba(255,255,255,.06); }

/* ===================== ALERTAS ===================== */
.tr-alerts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 72px;
}

.tr-alert-card {
  position: relative;
  background: var(--l-card);
  border: 1px solid var(--l-border);
  border-radius: 20px;
  padding: 36px 32px;
  overflow: hidden;
  box-shadow: var(--l-shadow);
  transition: border-color .3s, box-shadow .3s, background .3s;
}

.tr-alert-card:hover {
  border-color: var(--l-border-h);
  box-shadow: var(--l-shadow-h);
}

.tr-alert-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  opacity: .5;
}

.tr-alert-icon {
  margin-bottom: 20px;
  opacity: .7;
  transition: opacity .3s;
}

.tr-alert-card:hover .tr-alert-icon {
  opacity: 1;
}

.tr-alert-card h3 {
  font-size: 16px;
  font-weight: 400;
  color: var(--l-text);
  margin-bottom: 10px;
  letter-spacing: -.01em;
}

.tr-alert-card p {
  font-size: 13px;
  font-weight: 400;
  color: var(--l-muted);
  line-height: 1.8;
  margin-bottom: 20px;
}

.tr-alert-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .08em;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid;
}

/* ===================== PLANOS (shell + toggle + 1 card) ===================== */
.tr-plans-shell {
  position: relative;
  background: #f8f9fa;
  border: 1px solid rgba(15,20,35,.06);
  border-radius: 28px;
  padding: 28px 28px 32px;
  margin-top: 16px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.tr-billing {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 4px 6px 22px;
}

.tr-billing-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--l-text);
  letter-spacing: -.005em;
  transition: color .25s, opacity .25s;
}

.tr-billing-savings {
  font-size: 13px;
  font-weight: 400;
  color: #15803d;
  letter-spacing: .005em;
  transition: opacity .25s, color .25s;
}

.tr-plans-shell[data-billing="monthly"] .tr-billing-label {
  color: var(--l-muted);
  opacity: .65;
}

.tr-plans-shell[data-billing="monthly"] .tr-billing-savings {
  opacity: .45;
  color: var(--l-muted);
}

.tr-billing-switch {
  position: relative;
  width: 48px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(15,20,35,.12);
  background: #fff;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background .3s, border-color .3s, box-shadow .3s;
  font-family: inherit;
}

.tr-billing-switch:hover { border-color: rgba(15,20,35,.2); }
.tr-billing-switch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,102,255,.18);
}

.tr-billing-knob {
  position: absolute;
  top: 50%;
  left: 25px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15,20,35,.22);
  transform: translateY(-50%);
  transition: left .32s cubic-bezier(.34,1.56,.64,1), background .3s;
}

.tr-plans-shell[data-billing="annual"] .tr-billing-switch {
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(0,102,255,.25);
}

.tr-plans-shell[data-billing="monthly"] .tr-billing-switch {
  background: rgba(15,20,35,.12);
}

.tr-plans-shell[data-billing="monthly"] .tr-billing-knob { left: 3px; }

.tr-plans {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 480px;
  margin: 0 auto;
}

.tr-plan-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(15,20,35,.08);
  border-radius: 22px;
  padding: 40px 36px 36px;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}

.tr-plan-card:hover {
  border-color: rgba(15,20,35,.16);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15,20,35,.10);
}

.tr-plan-featured {
  border-color: rgba(0,102,255,.28);
  background: linear-gradient(180deg, rgba(0,102,255,.02), #fff 60%);
}

.tr-plan-featured:hover {
  border-color: rgba(0,102,255,.5);
  box-shadow: 0 20px 44px rgba(15,20,35,.10), 0 0 24px rgba(0,102,255,.08);
}

.tr-plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

.tr-plan-tag {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 6px;
}

.tr-plan-name {
  font-size: 18px;
  font-weight: 400;
  color: var(--l-text);
  margin-bottom: 12px;
  letter-spacing: -.01em;
}

.tr-plan-desc {
  font-size: 13px;
  font-weight: 400;
  color: var(--l-muted);
  line-height: 1.7;
  margin-bottom: 24px;
}

.tr-plan-price {
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.tr-price-currency {
  font-size: 13px;
  font-weight: 400;
  color: var(--l-muted);
}

.tr-price-val {
  font-size: 42px;
  font-weight: 400;
  color: var(--l-text);
  letter-spacing: -.02em;
  line-height: 1;
  transition: opacity .22s ease, transform .22s ease;
}

.tr-price-val.gradient-text {
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tr-price-sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--l-muted);
  margin-left: 2px;
}

.tr-plan-min {
  font-size: 10px;
  font-weight: 400;
  color: var(--l-muted);
  margin-bottom: 28px;
  transition: opacity .22s ease, transform .22s ease;
}

.tr-plan-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.tr-plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--l-muted);
  line-height: 1.5;
}

.tr-plan-features li svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--cyan);
}

.tr-plan-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  padding: 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  border-radius: 12px;
  border: 1px solid var(--l-border);
  color: var(--l-muted);
  transition: color .2s, border-color .2s, background .2s;
}

.tr-plan-cta:hover {
  color: var(--l-text);
  border-color: var(--l-border-h);
}

.tr-plan-cta-featured {
  background: linear-gradient(135deg, rgba(0,102,255,.12), rgba(0,204,255,.08));
  border-color: rgba(0,102,255,.35);
  color: var(--blue);
  font-weight: 600;
}

.tr-plan-cta-featured:hover {
  background: linear-gradient(135deg, rgba(0,102,255,.22), rgba(0,204,255,.14));
  border-color: rgba(0,102,255,.55);
  color: #0040b0;
}

.tr-plans-shell.is-switching .tr-price-val,
.tr-plans-shell.is-switching .tr-plan-min[data-label-anual] {
  opacity: 0;
  transform: translateY(-6px);
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1024px) {
  .tr-hero-inner {
    grid-template-columns: 1fr;
    gap: 56px;
    text-align: center;
  }

  .tr-feature-list {
    align-items: center;
  }

  .tr-hero-ctas {
    justify-content: center;
  }

  .tr-hero-dash {
    max-width: 440px;
    margin: 0 auto;
    width: 100%;
  }

  .tr-challenges {
    grid-template-columns: 1fr;
  }

  .tr-steps {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .tr-step-line {
    display: none;
  }

  .tr-criteria-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tr-sig-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .tr-devices-grid {
    grid-template-columns: 1fr;
  }

  .tr-alerts-grid {
    grid-template-columns: 1fr;
  }

  .tr-plans-shell {
    padding: 22px 20px 26px;
    border-radius: 22px;
  }
  .tr-billing { gap: 10px; padding: 2px 4px 18px; }
  .tr-billing-switch { margin-left: auto; }
  .tr-plan-card { padding: 36px 24px 28px; }
}

@media (max-width: 768px) {
  .tr-hero-inner {
    padding: 120px 20px 80px;
  }

  .tr-title {
    font-size: 40px;
  }

  .tr-criteria-grid {
    grid-template-columns: 1fr;
  }

  .tr-dash-metrics {
    grid-template-columns: 1fr;
  }
}

/* ===================== DISPOSITIVOS — DARK PANEL (Leaflet map) ===================== */
.tr-dev-section{
  position:relative;
  background:#0a0a0a;
  color:#fff;
  padding:100px 0;
  z-index:2;
}
.tr-dev-section .section-eyebrow{color:var(--blue)}
.tr-dev-section .section-title{color:#fff}
.tr-dev-section .section-sub{color:rgba(255,255,255,.55)}

.st-row{
  display:flex;
  gap:24px;
  align-items:stretch;
  min-height:480px;
  margin-top:56px;
  font-family:'Montserrat',sans-serif;
}

.st-left{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.st-card{
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  padding:30px 28px;
  background:rgba(255,255,255,.02);
  flex:1;
  opacity:0;
  transform:translateX(-30px);
  transition:border-color .3s,background .3s;
}
.st-card.vis{animation:stIn .6s ease forwards}
.st-card:nth-child(2).vis{animation-delay:.12s}
.st-card:hover{
  border-color:rgba(168,85,247,.25);
  background:rgba(168,85,247,.03);
}

.st-icon{
  width:46px;height:46px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
}
.st-icon svg{width:20px;height:20px;fill:#fff}

.st-card h3{
  font-size:21px;font-weight:500;
  margin-bottom:10px;color:#f0f0f0;line-height:1.3;
}
.st-card p{
  font-size:14px;color:#888;line-height:1.65;font-weight: 400;
}

.st-map{
  flex:1.15;
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  overflow:hidden;
  position:relative;
  opacity:0;
  transform:translateX(30px);
  background:#0a0a0a;
}
.st-map.vis{animation:stInR .7s ease forwards;animation-delay:.15s}

#stMap{width:100%;height:100%;min-height:480px}
.st-map .leaflet-control-zoom,
.st-map .leaflet-control-attribution{display:none!important}

.st-badges{
  position:absolute;top:12px;left:12px;
  display:flex;gap:8px;z-index:1000;
  font-family:'Montserrat',sans-serif;
}
.st-bg{
  display:flex;align-items:center;gap:5px;
  background:rgba(8,8,8,.94);
  padding:5px 11px;border-radius:6px;
  font-size:11px;color:#aaa;
  border:1px solid rgba(255,255,255,.06);
}
.st-bg .dot{width:6px;height:6px;border-radius:50%}
.st-bg .dot.g{background:#22c55e}
.st-bg .dot.r{background:#ef4444}
.st-bg b{color:#fff;font-weight:500}

.st-search{
  position:absolute;top:12px;right:12px;z-index:1000;
  background:rgba(8,8,8,.94);
  padding:5px 12px;border-radius:6px;
  font-size:11px;color:#555;
  border:1px solid rgba(255,255,255,.06);
  font-family:'Montserrat',sans-serif;
  display:flex;align-items:center;gap:6px;
}
.st-search svg{width:12px;height:12px;fill:#555}

.st-bottom{
  position:absolute;bottom:12px;left:12px;right:12px;
  display:flex;justify-content:space-between;align-items:center;
  z-index:1000;pointer-events:none;
  font-family:'Montserrat',sans-serif;
}
.st-live{
  display:flex;align-items:center;gap:6px;
  background:rgba(8,8,8,.94);
  padding:5px 12px;border-radius:6px;
  border:1px solid rgba(255,255,255,.06);
  font-size:11px;color:#22c55e;font-weight:500;letter-spacing:.8px;
}
.st-live::before{
  content:'';width:6px;height:6px;
  background:#22c55e;border-radius:50%;
  animation:stBlink 1.4s ease-in-out infinite;
}

/* Pulse markers */
.sp{display:flex;align-items:center;justify-content:center}
.sp .sc{
  width:11px;height:11px;
  background:#22c55e;border-radius:50%;
  position:relative;z-index:3;
  box-shadow:0 0 6px 2px rgba(34,197,94,.5);
}
.sp .sr1,.sp .sr2{
  position:absolute;width:11px;height:11px;border-radius:50%;
}
.sp .sr1{
  background:rgba(34,197,94,.35);z-index:2;
  animation:stPR 2.4s ease-out infinite;
}
.sp .sr2{
  background:rgba(34,197,94,.15);z-index:1;
  animation:stPR 2.4s ease-out infinite .6s;
}
.sd1 .sr1{animation-delay:.2s}.sd1 .sr2{animation-delay:.8s}
.sd2 .sr1{animation-delay:.5s}.sd2 .sr2{animation-delay:1.1s}
.sd3 .sr1{animation-delay:.8s}.sd3 .sr2{animation-delay:1.4s}
.sd4 .sr1{animation-delay:1.1s}.sd4 .sr2{animation-delay:1.7s}

@keyframes stPR{
  0%{transform:scale(1);opacity:.7}
  100%{transform:scale(2.8);opacity:0}
}

/* Tooltip */
.stt{
  background:rgba(8,8,8,.92)!important;
  border:1px solid rgba(34,197,94,.25)!important;
  border-radius:8px!important;
  padding:7px 13px!important;
  font-family:'Montserrat',sans-serif!important;
  color:#fff!important;
  box-shadow:0 6px 24px rgba(0,0,0,.5)!important;
  font-size:12px!important;
}
.stt-n{font-weight:500;font-size:13px}
.stt-s{
  color:#22c55e;font-size:11px;margin-top:2px;
  display:flex;align-items:center;gap:4px;
}
.stt-s::before{
  content:'';width:5px;height:5px;
  background:#22c55e;border-radius:50%;
}

@keyframes stIn{
  from{opacity:0;transform:translateX(-30px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes stInR{
  from{opacity:0;transform:translateX(30px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes stBlink{
  0%,100%{opacity:1}50%{opacity:.2}
}

@media(max-width:900px){
  .st-row{flex-direction:column;min-height:auto}
  #stMap{min-height:380px}
}