/* ╔══════════════════════════════════════════════════════════╗
   ║  DOQSOFT — Gespage product page                          ║
   ║  Extends styles.css with product-specific components     ║
   ║  Product accent color: --color-gespage (#678dd6)         ║
   ╚══════════════════════════════════════════════════════════╝ */

:root {
  --gp-primary: #678dd6;                          /* Azul Gespage on-prem */
  --gp-primary-dark: #3f5fa8;
  --gp-primary-darker: #2c4d92;
  --gp-primary-soft: rgba(103, 141, 214, 0.08);
  --gp-primary-tint: rgba(103, 141, 214, 0.15);
  --gp-glow: rgba(103, 141, 214, 0.25);
  --gp-accent: #96c827;                           /* Verde Gespage — accent (leaf, arrows positivas) */
  --gp-accent-dark: #6b941b;
  --gp-accent-soft: rgba(150, 200, 39, 0.10);
}

/* ─────────────────────────────────────────────
   Sub-bar
   ───────────────────────────────────────────── */
.product-subbar-gespage {
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  background: rgba(254, 254, 254, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--color-border-soft);
  padding: 0.625rem 0;
}

.product-subbar-gespage .breadcrumbs a:hover { color: var(--gp-primary-dark); }
.product-subbar-gespage .product-subbar-anchors a:hover {
  color: var(--gp-primary-dark);
  background: var(--gp-primary-soft);
}

/* ─────────────────────────────────────────────
   Eyebrow variant (Gespage blue)
   ───────────────────────────────────────────── */
.eyebrow-gespage { color: var(--gp-primary-dark); }
.eyebrow-gespage .eyebrow-dot {
  background: var(--gp-primary);
  box-shadow: 0 0 0 3px var(--gp-primary-tint);
}

/* ─────────────────────────────────────────────
   Hero (overrides for blue palette)
   ───────────────────────────────────────────── */
.ph-gespage {
  background: linear-gradient(180deg, #f8faff 0%, #f1f4fa 60%, #fefefe 100%);
}

.ph-gespage .ph-orb-1 {
  background: radial-gradient(circle, var(--gp-primary) 0%, transparent 65%);
}

.ph-gespage .ph-orb-2 {
  background: radial-gradient(circle, var(--gp-accent) 0%, transparent 65%);
}

.ph-gespage .ph-grid {
  background-image:
    linear-gradient(to right, rgba(103, 141, 214,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(103, 141, 214,0.05) 1px, transparent 1px);
}

.page-gespage .product-badge {
  border-color: var(--gp-primary-tint);
  box-shadow: 0 1px 2px rgba(103, 141, 214, 0.08);
}

.page-gespage .product-badge-dot {
  background: var(--gp-primary);
  box-shadow: 0 0 0 3px var(--gp-primary-tint);
}

.page-gespage .product-badge-name { color: var(--gp-primary-dark); }

/* Gradient del <em> en hero title — mono-cromático azul Gespage.
   Decisión cliente 2026-05-14: removida la transición azul→verde→azul
   anterior que generaba una banda verde lavada en el medio. Patrón ahora
   idéntico al de MPS: primary → primary-dark, solo tonos del color del producto. */
.page-gespage .product-hero-title em {
  background: linear-gradient(135deg, var(--gp-primary) 0%, var(--gp-primary-dark) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* CTAs primarios usan azul Gespage (--gp-primary #678DD6) consistentemente.
   Decisión cliente 2026-05-14: TODOS los CTAs (incluido sticky header) heredan
   el color del producto. Override compuesto cubre .btn-product + .btn-primary. */
.page-gespage .btn-product,
.page-gespage .btn-primary {
  background: var(--gp-primary);
  color: white;
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 8px 24px -8px var(--gp-glow);
}

.page-gespage .btn-product:hover,
.page-gespage .btn-primary:hover {
  background: var(--gp-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 14px 30px -8px var(--gp-glow);
}

.btn-cloud-icon {
  font-size: 1rem;
  line-height: 1;
  margin-right: 0.125rem;
}

/* ─────────────────────────────────────────────
   Hero scene · Gespage dashboard mockup + floating insight cards
   Rebuild 2026-05-14: matches real Gespage dashboard SVG reference.
   Stack: laptop frame with internal grid dashboard + 3 floating
   cards (schedule pill · pie chart · area chart) anchored around.
   Mobile: dashboard stacks above cards reflowing below.
   ───────────────────────────────────────────── */

/* Container — fills hero visual side.
   Min-height contenido para que el hero quepa sin scroll en viewport
   estándar (1080p ≈ 900px after header + subbar). */
.gp-hero-scene {
  position: relative;
  width: 100%;
  min-height: 360px;
  padding: var(--space-1);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  isolation: isolate;
}

@media (min-width: 768px) {
  .gp-hero-scene { min-height: 400px; padding: var(--space-2); }
}

/* Page-specific override: align visual to TOP (not center) en grid del hero,
   para que empiece a la altura del eyebrow del text block y no se "centre"
   verticalmente cuando el text block es alto. */
.page-gespage .product-hero-grid {
  align-items: start;
}

/* ─────────────────────────────────────────────
   Laptop frame (replaces previous laptop + printer + transit)
   ───────────────────────────────────────────── */
.gp-laptop {
  position: relative;
  width: 100%;
  max-width: 540px;
  perspective: 1200px;
  z-index: 2;
}

.gp-laptop-screen {
  background: #0e1015;
  border-radius: 8px 8px 4px 4px;
  padding: 8px;
  border: 1.5px solid #1f2937;
  border-bottom: 3px solid #1f2937;
  box-shadow:
    0 30px 60px -20px rgba(103, 141, 214, 0.28),
    0 14px 36px -12px rgba(0, 0, 0, 0.18);
}

.gp-laptop-base {
  width: 116%;
  height: 7px;
  margin: 0 auto;
  margin-left: -8%;
  background: linear-gradient(180deg, #4b5563 0%, #1f2937 100%);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  position: relative;
}

.gp-laptop-base::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22%;
  height: 3px;
  background: #6b7280;
  border-radius: 0 0 4px 4px;
}

/* ─────────────────────────────────────────────
   Dashboard window inside laptop
   ───────────────────────────────────────────── */
/* Window: flex-row con sidebar full-height + body (topbar + main) a la derecha.
   Matching mockup oficial Gespage: la sidebar empieza desde el top del screen,
   no debajo del topbar. */
.gp-dash-window {
  background: #fefefe;
  border-radius: 4px;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  color: var(--color-text);
  display: flex;
  align-items: stretch;
}

/* Body: columna derecha con topbar (arriba) + main (abajo) */
.gp-dash-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Top bar — matching mockup oficial Gespage:
   · Área blanca full-height alrededor del logo (izquierda)
   · Área azul (centro, vacía como en el mockup real)
   · admin + bell + Logout sobre el azul (derecha)
   Altura fija para que el área blanca se extienda exacto a la altura del topbar. */
.gp-dash-topbar {
  background: linear-gradient(180deg, #678dd6 0%, #5a7fc7 100%);
  color: white;
  display: flex;
  align-items: stretch;
  height: 42px;
  font-size: 9.5px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* Logo area: fondo blanco que cubre TODA la altura del topbar.
   Logo Gespage centrado verticalmente. */
.gp-dash-logo-area {
  background: white;
  padding: 0 16px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-right: 1px solid rgba(0,0,0,0.04);
}

.gp-dash-logo-img {
  height: 20px;
  width: auto;
  display: block;
}

/* User actions: admin name + bell icon + Logout */
.gp-dash-user-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  font-size: 9.5px;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.92);
}

.gp-dash-user-name {
  font-weight: 500;
}

.gp-dash-bell {
  display: inline-flex;
  align-items: center;
  opacity: 0.85;
}

.gp-dash-logout {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  opacity: 0.92;
}

/* Sidebar full-height — siempre al lado izquierdo del .gp-dash-window,
   desde top hasta bottom del laptop screen. Width fijo. */
.gp-dash-sidebar {
  background: #fefefe;
  border-right: 1px solid var(--color-border-soft);
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 32px;
  flex-shrink: 0;
}

.gp-side-ico {
  color: var(--color-text-muted);
  padding: 4px;
  border-radius: 4px;
  display: inline-flex;
  cursor: default;
}

.gp-side-ico.active {
  color: #678dd6;
  background: rgba(103, 141, 214, 0.10);
}

/* Main grid: row top (3 columns) + row bottom (1 wide).
   Background gris claro de fondo (el "canvas" del dashboard). */
.gp-dash-main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "cockpit ranking eco"
    "events  events  events";
  gap: 6px;
  padding: 8px;
  background: #f5f7fa;
  min-height: 0;
}

.gp-dash-panel {
  background: #fefefe;
  border: 1px solid var(--color-border-soft);
  border-radius: 4px;
  padding: 7px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gp-panel-cockpit { grid-area: cockpit; }
.gp-panel-ranking { grid-area: ranking; }
.gp-panel-eco { grid-area: eco; }
.gp-panel-events { grid-area: events; }

.gp-panel-h {
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.gp-panel-sub {
  font-size: 7.5px;
  color: var(--color-text-light);
  margin-top: -2px;
  margin-bottom: 2px;
}

/* Cockpit rows */
.gp-cockpit-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 2px;
}

.gp-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 8px;
  padding: 2px 0;
  border-bottom: 1px dotted var(--color-border-soft);
}

.gp-row:last-child { border-bottom: none; }

.gp-row-lbl {
  color: var(--color-text-muted);
}

.gp-row-val {
  font-family: 'Funnel Display', serif;
  font-weight: 500;
  color: var(--color-ink);
  font-size: 10px;
  letter-spacing: -0.01em;
}

.gp-row-val.gp-row-green {
  color: #15803d;
}

/* Bar chart (Top Ranking) */
.gp-barchart {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  align-items: flex-end;
  height: 62px;
  margin-top: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border-soft);
  position: relative;
}

.gp-bar {
  background: linear-gradient(180deg, #678dd6 0%, #5076b3 100%);
  border-radius: 1px 1px 0 0;
  position: relative;
  min-width: 0;
}

.gp-bar:nth-child(odd) {
  background: linear-gradient(180deg, #96c827 0%, #7daa1e 100%);
}

.gp-bar-tip {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 6.5px;
  color: var(--color-text-light);
  font-family: ui-monospace, monospace;
  white-space: nowrap;
}

/* Environmental Impact eco rows */
.gp-eco-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
}

.gp-eco-row {
  display: grid;
  grid-template-columns: 16px auto 1fr;
  align-items: center;
  gap: 6px;
  padding: 3px 5px;
  background: rgba(150, 200, 39, 0.08);
  border-radius: 3px;
}

.gp-eco-ico {
  color: #96c827;
  display: inline-flex;
}

.gp-eco-val {
  font-family: 'Funnel Display', serif;
  font-weight: 500;
  font-size: 10px;
  color: #15803d;
  letter-spacing: -0.01em;
}

.gp-eco-lbl {
  font-size: 7.5px;
  color: var(--color-text-muted);
}

/* Event Logger */
.gp-evt-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}

.gp-evt {
  display: grid;
  grid-template-columns: 8px 32px 36px 1fr;
  align-items: center;
  gap: 6px;
  font-size: 7.5px;
  padding: 2px 0;
  border-bottom: 1px dotted var(--color-border-soft);
}

.gp-evt:last-child { border-bottom: none; }

.gp-evt-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.gp-evt-dot.ok { background: #96c827; }
.gp-evt-dot.warn { background: #f59e0b; }
.gp-evt-dot.err { background: #ef4444; }

.gp-evt-time {
  font-family: ui-monospace, monospace;
  color: var(--color-text-muted);
}

.gp-evt-src {
  font-family: ui-monospace, monospace;
  background: #f5f7fa;
  padding: 1px 4px;
  border-radius: 2px;
  color: var(--color-text-muted);
  font-size: 6.5px;
  text-align: center;
  white-space: nowrap;
}

.gp-evt-msg {
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────
   Floating insight cards (around laptop)
   ───────────────────────────────────────────── */
.gp-float {
  position: absolute;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.12), 0 2px 8px -2px rgba(103, 141, 214, 0.18);
  font-family: 'Montserrat', sans-serif;
  z-index: 3;
  display: none;  /* mobile: hide floats; only laptop */
}

@media (min-width: 1024px) {
  .gp-float { display: block; animation: gpFloatBob 6s ease-in-out infinite; }
}

@keyframes gpFloatBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* Float 1 · Schedule reports (pill flotando por encima del laptop, top-left).
   Posicionada con top negativo para que quede SOBRE el laptop, no encima
   del dashboard interno (evita tapar el logo Gespage del header). */
.gp-float-schedule {
  top: -18px;
  left: 4%;
  padding: 8px 12px;
  display: none;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  background: white;
  font-size: 10.5px;
  font-weight: 500;
  color: #15803d;
  animation-delay: 0.2s;
}

@media (min-width: 1024px) {
  .gp-float-schedule { display: inline-flex; }
}

.gp-float-ico-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #96c827;
  color: white;
}

.gp-float-text {
  white-space: nowrap;
}

/* Float 2 · Pie chart (bottom-left) */
.gp-float-pie {
  bottom: 6%;
  left: -4%;
  padding: 10px 12px 12px;
  width: 148px;
  animation-delay: 0.8s;
}

.gp-float-label {
  font-size: 8.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.gp-float-pie-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gp-pie {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

.gp-pie-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 9px;
  color: var(--color-text);
}

.gp-pie-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.gp-pie-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}

/* Float 3 · Savings impact (right) — 4 metrics: árboles, agua, CO₂, ahorro $.
   Reemplaza la card de costo/mes anterior. Grid 2x2 compacto con métricas
   verdes que comunican impacto ambiental + financiero. */
.gp-float-savings {
  top: 22%;
  right: -5%;
  padding: 11px 12px 12px;
  width: 200px;
  animation-delay: 1.4s;
}

.gp-savings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
}

.gp-saving {
  background: rgba(150, 200, 39, 0.08);
  border-radius: 5px;
  padding: 7px 8px;
  display: grid;
  grid-template-columns: 16px 1fr;
  grid-template-rows: auto auto;
  column-gap: 6px;
  row-gap: 1px;
}

.gp-saving-ico {
  grid-row: 1 / 3;
  align-self: center;
  color: #96c827;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gp-saving-val {
  font-family: 'Funnel Display', serif;
  font-weight: 500;
  font-size: 14px;
  color: #15803d;
  letter-spacing: -0.01em;
  line-height: 1;
}

.gp-saving-lbl {
  font-size: 7.5px;
  color: var(--color-text-muted);
  line-height: 1.2;
}

/* Mini-card "ahorro $" usa tint verde DOQSOFT (brand) en lugar de Gespage
   green para distinguir el metric financiero del ambiental. */
.gp-saving-money {
  background: rgba(33, 182, 95, 0.08);
}

.gp-saving-money .gp-saving-ico,
.gp-saving-money .gp-saving-val {
  color: #15803d;
}

.product-hero-visual { position: relative; }

/* ─────────────────────────────────────────────
   Pull printing flow (the wow moment)
   ───────────────────────────────────────────── */
.pull-printing {
  padding: var(--space-32) 0;
  background:
    radial-gradient(ellipse at top, var(--gp-primary-soft) 0%, transparent 50%),
    var(--color-bg);
  position: relative;
}

.pp-flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-12);
  align-items: stretch;
}

@media (min-width: 1024px) {
  .pp-flow {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 0;
  }
}

.pp-step {
  background: white;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-2xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
  transition: all var(--t-mid) var(--ease-out);
  overflow: hidden;
}

.pp-step:hover {
  transform: translateY(-4px);
  border-color: var(--gp-primary-tint);
  box-shadow: 0 24px 48px -16px var(--gp-glow);
}

.pp-step-num {
  font-family: 'Funnel Display', serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--gp-primary-dark);
  letter-spacing: 0.04em;
  align-self: flex-start;
}

.pp-step-final {
  background: linear-gradient(135deg, var(--gp-primary-soft) 0%, white 60%);
  border-color: var(--gp-primary-tint);
}

.pp-step h3 {
  font-family: 'Funnel Display', serif;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.pp-step p {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
}

.pp-step-visual {
  min-height: 220px;
  background: linear-gradient(180deg, var(--color-bg-soft) 0%, var(--color-bg-cream) 100%);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4);
  position: relative;
  overflow: hidden;
}

.pp-step-tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--gp-primary-dark);
  background: white;
  padding: 4px 10px;
  border-radius: var(--r-full);
  border: 1px solid var(--gp-primary-tint);
  letter-spacing: 0.02em;
}

.pp-arrow {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3);
}

@media (min-width: 1024px) { .pp-arrow { display: flex; } }

.pp-arrow svg {
  animation: arrowMove 2s ease-in-out infinite;
}

@keyframes arrowMove {
  0%, 100% { transform: translateX(0); opacity: 0.6; }
  50% { transform: translateX(4px); opacity: 1; }
}

/* Step 1: send — laptop escalado para sinergia con MFP del card 03 (~188px).
   Dimensiones aumentadas ~1.9x del tamaño original 2026-05-14. */
.pp-mini-laptop {
  position: relative;
  width: 170px;
}

.pp-mini-screen {
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
  border-radius: 9px 9px 3px 3px;
  padding: 14px 12px 20px;
  border: 1.5px solid #374151;
  position: relative;
}

.pp-mini-base {
  width: 112%;
  height: 6px;
  background: #4b5563;
  border-radius: 0 0 6px 6px;
  margin: 0 -6%;
}

.pp-mini-bar {
  height: 8px;
  background: var(--gp-primary);
  border-radius: 3px;
  margin-bottom: 10px;
  width: 70%;
}

.pp-mini-line {
  height: 5px;
  background: #6b7280;
  border-radius: 3px;
  margin-bottom: 7px;
}

.pp-mini-line.short { width: 60%; margin-bottom: 14px; }

.pp-mini-print-btn {
  background: var(--gp-primary);
  color: white;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  padding: 6px 0;
  border-radius: 4px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Step 2: queue */
.pp-queue {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Server rack on-prem con badge candado overlay.
   Reemplaza el cloud visual anterior (que sugería SaaS / cloud) para
   reflejar correctamente que Gespage on-prem vive en infraestructura
   del cliente. Decisión cliente 2026-05-14. */
.pp-queue-server {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 10px;
  background: white;
  border: 2px solid var(--gp-primary-tint);
  box-shadow: 0 8px 16px -4px var(--gp-glow);
}

.pp-queue-server svg {
  display: block;
}

.pp-queue-lock-badge {
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 26px; height: 26px;
  background: var(--gp-primary);
  color: white;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
  box-shadow: 0 2px 6px -1px rgba(99, 138, 199, 0.4);
}

.pp-queue-jobs {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pp-queue-job {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: white;
  border: 1px solid var(--gp-primary-tint);
  border-radius: 4px;
  width: 90px;
}

.pp-queue-job.dim { opacity: 0.4; }

.pp-queue-job span:first-child {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gp-primary);
  flex-shrink: 0;
}

.pp-queue-job span:last-child {
  flex: 1;
  height: 4px;
  background: #cbd5e1;
  border-radius: 2px;
}

/* Step 3: release — MFP touchscreen embedded with Gespage interface
   Rebuild 2026-05-14: matches Gespage_2_te autenticas y liberas.svg reference.
   Frame negro tipo terminal MFP + pantalla con topbar dark "Home"
   + 3 acciones (Print/Scan/Copy) en círculos + avatar + logo Gespage. */

/* Outer black frame (bezel + control strip).
   Width compacto para que quepa cómodamente en el card 03 sin clipping. */
.pp-mfp {
  width: 188px;
  background: #0a0a0a;
  border-radius: 11px;
  padding: 8px 8px 0;
  box-shadow:
    0 10px 30px -8px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Inner screen */
.pp-mfp-screen {
  background: #fefefe;
  border-radius: 4px;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
}

/* Top bar dark blue (Gespage embedded firmware) */
.pp-mfp-topbar {
  background: #3f5079;
  color: white;
  display: flex;
  align-items: center;
  padding: 4px 7px;
  font-size: 7.5px;
  font-weight: 500;
  position: relative;
}

.pp-mfp-home {
  display: inline-flex;
  align-items: center;
  opacity: 0.9;
}

.pp-mfp-home svg { width: 8px; height: 8px; }

.pp-mfp-title {
  flex: 1;
  text-align: center;
  letter-spacing: 0.04em;
  font-size: 8px;
}

/* Body: login authentication screen — compacto */
.pp-mfp-body {
  padding: 6px 9px 5px;
  background: #fefefe;
  position: relative;
  min-height: 108px;
}

/* Gespage logo top-right corner — más pequeño para no chocar con avatar */
.pp-mfp-logo-tr {
  position: absolute;
  top: 6px;
  right: 8px;
  height: 11px;
  width: auto;
  display: block;
  z-index: 2;
}

/* Grid 2 columns: login form (left) + RFID badge (right) */
.pp-mfp-auth {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
  padding: 2px 0;
}

/* Login form column */
.pp-mfp-login {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.pp-mfp-avatar-big {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1px;
}

.pp-mfp-avatar-big svg {
  width: 16px;
  height: 16px;
}

.pp-mfp-login-title {
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #2a3447;
  margin-bottom: 2px;
}

.pp-mfp-input {
  width: 100%;
  font-size: 6px;
  color: #b0b8c4;
  background: #fefefe;
  border: 1px solid #cbd5e1;
  border-radius: 2px;
  padding: 3px 5px;
  letter-spacing: 0.01em;
}

.pp-mfp-approve {
  background: #5a7fc7;
  color: white;
  font-size: 6.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 2px;
  margin-top: 2px;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 2px rgba(99, 138, 199, 0.25);
}

/* RFID badge column */
.pp-mfp-rfid {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: 2px;
}

.pp-mfp-badge {
  display: inline-flex;
}

.pp-mfp-badge svg {
  width: 36px;
  height: auto;
  filter: drop-shadow(0 1px 2px rgba(99, 138, 199, 0.18));
}

.pp-mfp-waves {
  display: inline-flex;
  align-items: center;
}

.pp-mfp-waves svg {
  width: 10px;
  height: 18px;
}

/* Bottom control strip (NFC + home button + status icons) */
.pp-mfp-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 7px 6px;
  color: #6b7280;
}

.pp-mfp-nfc,
.pp-mfp-home-btn {
  display: inline-flex;
  align-items: center;
}

.pp-mfp-nfc svg,
.pp-mfp-home-btn svg { width: 9px; height: 9px; }

.pp-mfp-home-btn {
  border: 1px solid #2a2a2a;
  border-radius: 50%;
  padding: 2px 4px;
  color: #6b7280;
}

.pp-mfp-ctrl-dot {
  width: 3px;
  height: 3px;
  background: #6b7280;
  border-radius: 50%;
}

/* Pull printing benefits */
.pp-benefits {
  margin-top: var(--space-12);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) { .pp-benefits { grid-template-columns: repeat(3, 1fr); } }

.pp-benefit {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: var(--space-5);
  background: white;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-md);
}

.pp-benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--gp-primary-tint);
  color: var(--gp-primary-dark);
  margin-bottom: var(--space-2);
}

.pp-benefit strong {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
}

.pp-benefit span {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ─────────────────────────────────────────────
   Brands strip — tweak title color
   ───────────────────────────────────────────── */
.page-gespage .brands-title strong { color: var(--gp-primary-dark); }
.page-gespage .brand-name:hover { color: var(--gp-primary-dark); }

/* ─────────────────────────────────────────────
   Dashboard tour (Gespage variant) — REBUILD 2026-05-15
   Laptop con dashboard Gespage real (matching hero) + 3 floating cards
   con datos de los 3 reportes oficiales (Summary, Saving by user,
   Jobs distribution). Mix de nombres USA + hispanos en datos.
   ───────────────────────────────────────────── */
.dashboard-tour-gespage {
  padding: var(--space-32) 0;
  background:
    radial-gradient(ellipse at top, var(--gp-primary-soft) 0%, transparent 50%),
    var(--color-bg);
  position: relative;
}

/* Outer scene container.
   Mobile: flex-column (laptop arriba + floats apilados abajo).
   Desktop ≥1024px: position relative para que floats con absolute se anclen. */
.gp-tour-scene {
  position: relative;
  margin-top: var(--space-12);
  display: flex;
  flex-direction: column;
  align-items: center;
  isolation: isolate;
  padding: 24px 16px;
}

@media (min-width: 1024px) {
  .gp-tour-scene {
    display: block;
    padding: 40px 20px;
  }
}

/* Laptop frame (escalado para sección hero/tour) */
.gp-tour-laptop {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  z-index: 2;
}

.gp-tour-screen {
  background: #0e1015;
  border-radius: 10px 10px 4px 4px;
  padding: 10px;
  border: 1.5px solid #1f2937;
  border-bottom: 3px solid #1f2937;
  box-shadow:
    0 40px 80px -20px var(--gp-glow),
    0 16px 36px -8px rgba(0, 0, 0, 0.12);
}

.gp-tour-base {
  width: 110%;
  height: 9px;
  margin: 0 auto;
  margin-left: -5%;
  background: linear-gradient(180deg, #4b5563 0%, #1f2937 100%);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  position: relative;
}

.gp-tour-base::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18%;
  height: 3.5px;
  background: #6b7280;
  border-radius: 0 0 4px 4px;
}

/* Inner window: sidebar + right column */
.gp-tour-window {
  background: #fefefe;
  border-radius: 4px;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  color: var(--color-text);
  display: flex;
  align-items: stretch;
  min-height: 380px;
}

/* Sidebar full-height */
.gp-tour-sidebar {
  background: #fefefe;
  border-right: 1px solid var(--color-border-soft);
  padding: 14px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 36px;
  flex-shrink: 0;
}

.gp-tour-side-ico {
  color: var(--color-text-muted);
  padding: 5px;
  border-radius: 4px;
  display: inline-flex;
  cursor: default;
}

.gp-tour-side-ico.active {
  color: #678dd6;
  background: rgba(103, 141, 214, 0.10);
}

/* Right column */
.gp-tour-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Top bar Gespage (matching hero pattern: logo blanco area + admin/bell/logout) */
.gp-tour-topbar {
  background: linear-gradient(180deg, #678dd6 0%, #5a7fc7 100%);
  color: white;
  display: flex;
  align-items: stretch;
  height: 46px;
  font-size: 10px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.gp-tour-logo-area {
  background: white;
  padding: 0 18px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-right: 1px solid rgba(0,0,0,0.04);
}

.gp-tour-logo-img {
  height: 22px;
  width: auto;
  display: block;
}

.gp-tour-user-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  color: rgba(255,255,255,0.92);
}

.gp-tour-user-name { font-weight: 500; }
.gp-tour-bell { display: inline-flex; opacity: 0.85; }
.gp-tour-logout {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  opacity: 0.92;
}

/* Main content area */
.gp-tour-main {
  flex: 1;
  padding: 14px 16px 16px;
  background: #f5f7fa;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gp-tour-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--color-text-muted);
}

.gp-tour-breadcrumb span { font-weight: 500; }

/* 3 panel row */
.gp-tour-panels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.gp-tour-panel {
  background: #fefefe;
  border: 1px solid var(--color-border-soft);
  border-radius: 4px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 120px;
}

.gp-tour-panel-h {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.gp-tour-panel-sub {
  font-size: 8px;
  color: var(--color-text-light);
  margin-top: -3px;
}

/* Cockpit rows */
.gp-tour-panel-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gp-tour-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 9px;
  padding: 2px 0;
  border-bottom: 1px dotted var(--color-border-soft);
}

.gp-tour-row:last-child { border-bottom: none; }

.gp-tour-row span { color: var(--color-text-muted); }

.gp-tour-row strong {
  font-family: 'Funnel Display', serif;
  font-weight: 500;
  font-size: 11px;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.gp-tour-green { color: #15803d !important; }

/* Bar chart Top Ranking */
.gp-tour-barchart {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  align-items: flex-end;
  height: 72px;
  margin-top: 4px;
}

.gp-tour-bar {
  background: linear-gradient(180deg, #678dd6 0%, #5076b3 100%);
  border-radius: 1.5px 1.5px 0 0;
}

.gp-tour-bar:nth-child(odd) {
  background: linear-gradient(180deg, #96c827 0%, #7daa1e 100%);
}

/* Environmental eco rows */
.gp-tour-eco {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
}

.gp-tour-eco-row {
  display: grid;
  grid-template-columns: 14px auto 1fr;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: rgba(150, 200, 39, 0.08);
  border-radius: 3px;
}

.gp-tour-eco-row svg { color: #96c827; }

.gp-tour-eco-row strong {
  font-family: 'Funnel Display', serif;
  font-weight: 500;
  font-size: 11px;
  color: #15803d;
}

.gp-tour-eco-row span {
  font-size: 8px;
  color: var(--color-text-muted);
}

/* Event Logger table panel */
.gp-tour-table-panel {
  background: #fefefe;
  border: 1px solid var(--color-border-soft);
  border-radius: 4px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gp-tour-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9px;
}

.gp-tour-table td {
  padding: 3px 4px;
  border-bottom: 1px dotted var(--color-border-soft);
  vertical-align: middle;
}

.gp-tour-table tr:last-child td { border-bottom: none; }

.gp-tour-table td:nth-child(1) { width: 12px; }
.gp-tour-table td:nth-child(2) { font-family: ui-monospace, monospace; color: var(--color-text-muted); width: 40px; }
.gp-tour-table .gp-tour-src {
  font-family: ui-monospace, monospace;
  background: #f5f7fa;
  padding: 2px 5px;
  border-radius: 2px;
  color: var(--color-text-muted);
  font-size: 7.5px;
  width: 40px;
  text-align: center;
}

.gp-tour-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.gp-tour-dot.ok { background: #96c827; }
.gp-tour-dot.warn { background: #f59e0b; }

/* ─────────────────────────────────────────────
   Floating cards · réplica fiel de los 3 reportes oficiales Gespage
   1. Printing flow summary · 2. Saving by user · 3. Meter readings
   Look "documento PDF": borders negros finos, headers pastel azul/morado,
   font Arial-like sans serif, tablas con grid lines.
   Decisión cliente 2026-05-15: floats grandes que pueden tapar parte
   del dashboard (especialmente bottom-right con Meter readings).
   ───────────────────────────────────────────── */
/* Mobile-first: floats VISIBLES también en mobile/tablet, apilados verticalmente
   debajo del laptop (sin position absolute). Desktop ≥1024px override a flotantes.
   Decisión cliente 2026-05-15. */
.gp-tour-float {
  position: static;
  background: white;
  border: 1px solid #4a4a4a;
  border-radius: 6px;
  box-shadow:
    0 12px 30px -10px rgba(0, 0, 0, 0.18),
    0 4px 12px -3px rgba(103, 141, 214, 0.15);
  padding: 12px 14px;
  font-family: Arial, Helvetica, 'Montserrat', sans-serif;
  color: #222;
  width: 100%;
  max-width: 480px;
  margin-top: 18px;
  z-index: 3;
}

/* Desktop: floats con position absolute flotando alrededor del laptop */
@media (min-width: 1024px) {
  .gp-tour-float {
    position: absolute;
    margin-top: 0;
    width: auto;  /* width definido por cada float específico */
    max-width: none;
    box-shadow:
      0 20px 50px -12px rgba(0, 0, 0, 0.22),
      0 6px 16px -3px rgba(103, 141, 214, 0.18);
    animation: gpTourFloat 7s ease-in-out infinite;
  }
}

@keyframes gpTourFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Report header (logo + título centrado + fecha debajo) — matching PDF reports.
   Grid layout: logo spans 2 rows izquierda; title arriba + date abajo centrados
   en la columna derecha. Evita el solapamiento title/date que ocurría con
   position absolute. */
.gp-tour-rpt-head {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 1px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #4a4a4a;
}

.gp-tour-rpt-logo {
  grid-column: 1;
  grid-row: 1 / 3;
  height: 22px;
  width: auto;
  align-self: center;
}

.gp-tour-rpt-title {
  grid-column: 2;
  grid-row: 1;
  font-size: 12px;
  font-weight: 400;
  color: #222;
  letter-spacing: 0.01em;
  text-align: center;
  /* offset center to balance with logo on left (subtract half of logo+gap) */
  padding-right: 32px;
}

.gp-tour-rpt-date {
  grid-column: 2;
  grid-row: 2;
  font-size: 7.5px;
  color: #555;
  font-style: italic;
  text-align: center;
  padding-right: 32px;
}

/* Block section header (General, Environmental impact, etc.) */
.gp-tour-rpt-block {
  border: 1px solid #4a4a4a;
  border-radius: 3px;
  padding: 6px 8px 8px;
  margin-bottom: 6px;
}

.gp-tour-rpt-block-h {
  font-size: 9.5px;
  font-weight: 700;
  color: #222;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}

/* Stats table (General + Environmental) — 4 columns: label/value/label/value */
.gp-tour-rpt-stats {
  width: 100%;
  border-collapse: collapse;
  font-size: 8.5px;
  color: #222;
}

.gp-tour-rpt-stats td {
  padding: 2.5px 4px;
  vertical-align: middle;
}

.gp-tour-rpt-stats td:nth-child(2),
.gp-tour-rpt-stats td:nth-child(4) {
  text-align: right;
  font-weight: 600;
  padding-right: 8px;
}

.gp-tour-rpt-stats td:nth-child(3) {
  padding-left: 8px;
}

/* ───── Float 1 · Printing flow summary (top-right) ───── */
.gp-tour-float-summary {
  top: -6%;
  right: -3%;
  width: 320px;
  animation-delay: 0.2s;
}

/* ───── Float 2 · Saving by user (bottom-left) ───── */
.gp-tour-float-savings {
  bottom: -6%;
  left: -3%;
  width: 360px;
  animation-delay: 1.0s;
}

.gp-tour-rpt-savings {
  width: 100%;
  border-collapse: collapse;
  font-size: 8.5px;
  color: #222;
  border: 1px solid #4a4a4a;
}

.gp-tour-rpt-savings th,
.gp-tour-rpt-savings td {
  border: 1px solid #4a4a4a;
  padding: 4px 5px;
  vertical-align: middle;
}

.gp-tour-rpt-savings thead th {
  font-weight: 700;
  font-size: 9px;
  text-align: center;
}

.gp-tour-th-blue {
  background: #cfdaf0;
  color: #2a3447;
}

.gp-tour-th-purple {
  background: #d4c8e0;
  color: #3d2a5b;
}

.gp-tour-th-sub {
  font-size: 8px !important;
  font-weight: 600 !important;
}

.gp-tour-rpt-savings tbody td {
  text-align: left;
  font-weight: 600;
}

.gp-tour-rpt-savings tbody td:nth-child(3),
.gp-tour-rpt-savings tbody td:nth-child(4),
.gp-tour-rpt-savings tbody td:nth-child(5),
.gp-tour-rpt-savings tbody td:nth-child(6) {
  text-align: right;
  font-weight: 400;
}

/* ───── Float 3 · Meter readings (más abajo y a la izquierda · tapa parte del laptop)
   Decisión cliente 2026-05-15: mover hacia abajo-izquierda desde la esquina derecha. ───── */
.gp-tour-float-meters {
  bottom: -18%;
  right: 14%;
  width: 320px;
  animation-delay: 1.8s;
}

.gp-tour-rpt-printer-name {
  font-size: 10px;
  font-weight: 700;
  color: #222;
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid #678dd6;
}

.gp-tour-rpt-meta {
  width: 100%;
  border-collapse: collapse;
  font-size: 8.5px;
  color: #222;
  margin-bottom: 6px;
}

.gp-tour-rpt-meta td {
  padding: 1.5px 0;
  vertical-align: top;
}

.gp-tour-rpt-meta td:first-child {
  font-style: italic;
  color: #555;
  width: 38%;
}

.gp-tour-rpt-counters {
  width: 100%;
  border-collapse: collapse;
  font-size: 8.5px;
  color: #222;
  margin-bottom: 8px;
}

.gp-tour-rpt-counters th,
.gp-tour-rpt-counters td {
  padding: 3px 4px;
  border-bottom: 1px dashed #6b7280;
}

.gp-tour-rpt-counters thead th {
  font-weight: 400;
  font-style: italic;
  font-size: 8px;
  color: #555;
  text-align: center;
  background: transparent;
  border-bottom: 1px solid #4a4a4a;
}

.gp-tour-rpt-counters thead th:first-child {
  text-align: left;
}

.gp-tour-rpt-counters tbody td:first-child {
  font-weight: 400;
}

.gp-tour-rpt-counters tbody td:nth-child(2),
.gp-tour-rpt-counters tbody td:nth-child(3),
.gp-tour-rpt-counters tbody td:nth-child(4) {
  text-align: right;
}

.gp-tour-bold-head,
.gp-tour-bold-cell {
  font-weight: 700 !important;
  color: #222 !important;
}

/* Pie chart in meter readings card */
.gp-tour-rpt-pie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
}

.gp-tour-rpt-pie-title {
  font-size: 8px;
  font-style: italic;
  color: #555;
  text-align: center;
}

.gp-tour-rpt-pie-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  justify-content: center;
}

.gp-tour-rpt-pie-svg {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
}

.gp-tour-rpt-pie-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 7.5px;
  color: #222;
}

.gp-tour-rpt-pie-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.gp-tour-legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.gp-tour-rpt-num {
  font-family: Arial, Helvetica, sans-serif;
}

.dashboard-mockup {
  position: relative;
  margin-top: var(--space-12);
}

.dm-window {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow:
    0 40px 80px -20px var(--gp-glow),
    0 16px 36px -8px rgba(0, 0, 0, 0.1);
}

.dm-topbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(180deg, #fafafa, #f5f5f5);
  border-bottom: 1px solid var(--color-border-soft);
}

.dm-topbar-left { display: flex; gap: 0.375rem; }
.dm-dot { width: 11px; height: 11px; border-radius: 50%; }

.dm-topbar-url {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-muted);
  font-family: ui-monospace, SFMono-Regular, monospace;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.dm-body {
  display: grid;
  grid-template-columns: 60px 1fr;
  min-height: 540px;
}

@media (min-width: 768px) { .dm-body { grid-template-columns: 200px 1fr; } }

.dm-sidebar {
  background: linear-gradient(180deg, #0a0a0a, #131313);
  padding: 1rem 0.625rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: white;
}

@media (min-width: 768px) { .dm-sidebar { padding: 1.25rem 1rem; } }

.dm-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.5rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 0.5rem;
}

.dm-brand-mark { color: var(--gp-primary); display: flex; }
.dm-brand-name {
  font-family: 'Funnel Display', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  display: none;
}

@media (min-width: 768px) { .dm-brand-name { display: inline; } }

.dm-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dm-nav li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.625rem;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  border-radius: 6px;
  cursor: default;
  transition: background var(--t-fast) var(--ease-out);
  position: relative;
  white-space: nowrap;
}

.dm-nav li svg { flex-shrink: 0; }

@media (max-width: 767px) {
  .dm-nav li { justify-content: center; padding: 0.625rem 0; }
  .dm-nav li > span:not(.dm-badge),
  .dm-nav li:not(.active)::after { display: none; }
  .dm-nav li > svg + * { display: none; }
}

@media (min-width: 768px) {
  .dm-nav li > span:not(.dm-badge):not(.dm-brand-name) { display: inline; }
}

.dm-nav li.active {
  background: rgba(103, 141, 214, 0.18);
  color: white;
  font-weight: 500;
}

.dm-nav li.active::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--gp-primary);
  border-radius: 0 2px 2px 0;
}

.dm-badge {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  background: rgba(255,255,255,0.1);
  padding: 1px 6px;
  border-radius: var(--r-full);
}

.dm-main {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
  overflow: hidden;
}

@media (min-width: 768px) { .dm-main { padding: 1.75rem; } }

.dm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.dm-header h4 {
  font-family: 'Funnel Display', serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 4px;
}

.dm-header p { font-size: 12px; color: var(--color-text-muted); }

.dm-header-actions { display: flex; gap: 0.375rem; }

.dm-pill {
  padding: 0.375rem 0.75rem;
  font-size: 11px;
  font-weight: 500;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--r-full);
  color: var(--color-text);
}

.dm-pill-active {
  background: var(--color-ink);
  color: white;
  border-color: var(--color-ink);
}

/* KPIs */
.dm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.625rem;
}

@media (min-width: 768px) { .dm-kpi-grid { grid-template-columns: repeat(4, 1fr); } }

.dm-kpi {
  background: white;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-md);
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color var(--t-fast) var(--ease-out);
}

.dm-kpi:hover { border-color: var(--gp-primary-tint); }

.dm-kpi-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.dm-kpi-value {
  font-family: 'Funnel Display', serif;
  font-size: 1.875rem;
  font-weight: 400;
  color: var(--color-ink);
  letter-spacing: -0.025em;
  line-height: 1;
}

.dm-kpi-value i {
  font-size: 0.6em;
  color: var(--color-text-muted);
  font-style: normal;
  font-weight: 400;
  margin-left: 1px;
}

.dm-kpi-meta { font-size: 10px; color: var(--color-text-muted); font-weight: 500; }
.dm-kpi-meta.up { color: var(--gp-primary-dark); }
.dm-kpi-meta.down { color: var(--gp-primary-dark); }

/* charts row */
.dm-charts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.625rem;
}

@media (min-width: 768px) { .dm-charts { grid-template-columns: 2fr 1fr; } }

.dm-card {
  background: white;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-md);
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.dm-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dm-card-head h5 {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink);
}

.dm-tabs {
  display: flex;
  gap: 2px;
  background: var(--color-bg-soft);
  padding: 2px;
  border-radius: var(--r-full);
}

.dm-tabs span {
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-muted);
  border-radius: var(--r-full);
}

.dm-tabs span.active {
  background: white;
  color: var(--color-ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.dm-link {
  font-size: 10px;
  font-weight: 600;
  color: var(--gp-primary-dark);
  cursor: pointer;
}

.dm-chart {
  height: 130px;
  margin: -0.25rem 0;
}

.dm-chart svg { width: 100%; height: 100%; }

.dm-chart-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--color-text-light);
  padding: 0 4px;
}

/* Quotas widget */
.gp-quotas {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gp-quota { display: flex; flex-direction: column; gap: 3px; }

.gp-quota-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--color-text);
}

.gp-quota-val {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-weight: 600;
  color: var(--color-ink);
}

.gp-quota-bar {
  height: 5px;
  background: var(--color-border-soft);
  border-radius: var(--r-full);
  overflow: hidden;
}

.gp-quota-bar > div { height: 100%; border-radius: var(--r-full); }

/* Bottom row */
.dm-bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.625rem;
}

@media (min-width: 1024px) { .dm-bottom { grid-template-columns: 1.4fr 1fr; } }

.dm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.dm-table thead th {
  text-align: left;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  padding: 6px 4px;
  border-bottom: 1px solid var(--color-border-soft);
}

.dm-table tbody td {
  padding: 8px 4px;
  border-bottom: 1px solid var(--color-border-soft);
  color: var(--color-text);
}

.dm-table tbody tr:last-child td { border-bottom: 0; }
.dm-table tbody tr:hover td { background: var(--color-bg-soft); }

/* User avatar style for Gespage table */
.gp-user {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gp-primary), var(--gp-accent));
  color: white;
  font-family: 'Funnel Display', serif;
  font-size: 9px;
  font-weight: 600;
  margin-right: 6px;
  letter-spacing: 0;
}

.gp-quota-mini {
  display: inline-block;
  width: 60px;
  height: 4px;
  background: var(--color-border-soft);
  border-radius: var(--r-full);
  overflow: hidden;
  vertical-align: middle;
}

.gp-quota-mini > span {
  display: block;
  height: 100%;
  border-radius: var(--r-full);
}

/* alerts */
.dm-alerts { display: flex; flex-direction: column; gap: 4px; }

.dm-alerts li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.5rem;
  border-radius: 6px;
  transition: background var(--t-fast) var(--ease-out);
}

.dm-alerts li:hover { background: var(--color-bg-soft); }

.dm-alert-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}
.dm-alert-dot.ok { background: var(--gp-primary); }
.dm-alert-dot.warn { background: #f59e0b; }
.dm-alert-dot.err { background: #ef4444; }

.dm-alerts li > div { flex: 1; }
.dm-alerts strong { display: block; font-size: 11px; font-weight: 600; color: var(--color-ink); margin-bottom: 1px; }
.dm-alerts span { display: block; font-size: 10px; color: var(--color-text-muted); line-height: 1.35; }

.dm-alert-time { font-size: 10px; color: var(--color-text-light); flex-shrink: 0; }

/* ─────────────────────────────────────────────
   Audiences (4 cards Gespage)
   ───────────────────────────────────────────── */
.audiences-gespage {
  padding: var(--space-32) 0;
  background: var(--color-bg-cream);
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
}

.audiences-grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 640px) { .audiences-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .audiences-grid-4 { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } }

.audience-card {
  position: relative;
  background: white;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  transition: all var(--t-mid) var(--ease-out);
}

@media (min-width: 1100px) {
  .audience-card { padding: var(--space-10); gap: var(--space-5); }
}

.audience-card:hover {
  transform: translateY(-4px);
  border-color: var(--gp-primary-tint);
  box-shadow: 0 24px 48px -16px var(--gp-glow);
}

.audience-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--gp-primary-tint) 0%, var(--gp-primary-soft) 100%);
  color: var(--gp-primary-dark);
}

.audience-card h3 {
  font-family: 'Funnel Display', serif;
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.audience-card p {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
}

.audience-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: auto;
  border-top: 1px solid var(--color-border-soft);
  padding-top: var(--space-4);
}

.audience-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 12px;
  color: var(--color-text);
  line-height: 1.5;
}

.audience-list li::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gp-primary);
  margin-top: 0.55rem;
  flex-shrink: 0;
}

.audience-flag {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gp-primary-dark);
  background: var(--gp-primary-soft);
  padding: 5px 10px;
  border-radius: var(--r-full);
}

@media (min-width: 1100px) {
  .audience-flag { top: var(--space-6); right: var(--space-6); }
}

/* ─────────────────────────────────────────────
   Capabilities grid
   ───────────────────────────────────────────── */
.capabilities {
  padding: var(--space-32) 0;
  background: var(--color-bg);
}

.cap-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .cap-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-5);
  }
  .cap-grid > .cap-card:nth-of-type(1) { grid-column: span 4; }
  .cap-grid > .cap-card:nth-of-type(2) { grid-column: span 2; }
  .cap-grid > .cap-card:nth-of-type(3) { grid-column: span 2; }
  .cap-grid > .cap-card:nth-of-type(4) { grid-column: span 2; }
  .cap-grid > .cap-card:nth-of-type(5) { grid-column: span 2; }
  .cap-grid > .cap-card:nth-of-type(6) { grid-column: span 4; }
}

.cap-card {
  background: white;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: all var(--t-mid) var(--ease-out);
  overflow: hidden;
}

.cap-card:hover {
  transform: translateY(-3px);
  border-color: var(--gp-primary-tint);
  box-shadow: 0 16px 32px -12px var(--gp-glow);
}

.cap-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.cap-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  background: var(--gp-primary-tint);
  color: var(--gp-primary-dark);
}

.cap-card h3 {
  font-family: 'Funnel Display', serif;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.cap-card p {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
  flex: 1;
}

.cap-mock {
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: linear-gradient(180deg, var(--color-bg-soft) 0%, var(--color-bg-cream) 100%);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-md);
}

/* Pull printing mock */
.gp-pull-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.gp-pull-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--gp-primary);
  color: white;
  font-size: 14px;
  flex-shrink: 0;
}

.gp-pull-row > div { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.gp-pull-row strong { font-size: 11px; font-weight: 600; color: var(--color-ink); }
.gp-pull-row span { font-size: 10px; color: var(--color-text-muted); }

.gp-pull-tag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gp-primary-dark);
  background: var(--gp-primary-soft);
  padding: 3px 8px;
  border-radius: var(--r-sm);
}

/* Quota mock */
.cap-mock-quota { display: flex; flex-direction: column; gap: 0.5rem; }

.gp-q-row {
  display: grid;
  grid-template-columns: 50px 1fr 50px;
  align-items: center;
  gap: 0.5rem;
  font-size: 11px;
}

.gp-q-row > span:first-child { color: var(--color-text); font-weight: 500; }

.gp-q-bar {
  height: 5px;
  background: var(--color-border-soft);
  border-radius: var(--r-full);
  overflow: hidden;
}
.gp-q-bar > div { height: 100%; border-radius: var(--r-full); }

.gp-q-row > span:last-child {
  text-align: right;
  font-weight: 600;
  color: var(--color-ink);
  font-family: ui-monospace, SFMono-Regular, monospace;
}

/* Report mock */
.gp-report-tags { display: flex; gap: 4px; flex-wrap: wrap; }

.gp-report-tag {
  font-size: 10px;
  padding: 4px 9px;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--r-full);
  color: var(--color-text);
}

.gp-report-tag.active {
  background: var(--gp-primary);
  color: white;
  border-color: var(--gp-primary);
  font-weight: 600;
}

/* OS mock */
.gp-os-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: space-around;
}

.gp-os-row span {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text);
}

/* Pay mock */
.cap-mock-pay { display: flex; flex-direction: column; gap: 0.5rem; }

.gp-pay-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}

.gp-pay-amount {
  font-family: 'Funnel Display', serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--gp-primary-dark);
  letter-spacing: -0.02em;
}

.gp-pay-amount i {
  font-size: 11px;
  font-style: normal;
  color: var(--color-text-muted);
  font-weight: 400;
}

.gp-pay-actions { display: flex; gap: 4px; }

.gp-pay-chip {
  font-size: 10px;
  padding: 3px 8px;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--r-full);
  color: var(--color-text);
  font-weight: 500;
}

/* Policy mock */
.cap-mock-policy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  color: var(--color-text);
}

.gp-policy-rule {
  padding: 4px 8px;
  background: white;
  border-left: 2px solid var(--gp-primary);
  border-radius: 2px;
}

.gp-policy-rule code {
  background: var(--gp-primary-soft);
  color: var(--gp-primary-dark);
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 700;
  font-size: 10px;
  margin: 0 2px;
}

/* ─────────────────────────────────────────────
   Deployment modes
   ───────────────────────────────────────────── */
.deploy {
  padding: var(--space-32) 0;
  background: var(--color-bg-cream);
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
}

.deploy-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) { .deploy-grid { grid-template-columns: repeat(3, 1fr); } }

.deploy-card {
  position: relative;
  background: white;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  transition: all var(--t-mid) var(--ease-out);
}

@media (min-width: 768px) {
  .deploy-card { padding: var(--space-10); gap: var(--space-5); }
}

.deploy-card:hover {
  transform: translateY(-4px);
  border-color: var(--gp-primary-tint);
  box-shadow: 0 24px 48px -16px var(--gp-glow);
}

.deploy-card-feat {
  background: linear-gradient(135deg, var(--gp-primary-soft) 0%, white 60%);
  border-color: var(--gp-primary-tint);
}

.deploy-flag {
  position: absolute;
  top: -10px;
  left: var(--space-5);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: white;
  background: var(--gp-primary);
  padding: 4px 10px;
  border-radius: var(--r-full);
  box-shadow: 0 4px 8px -2px var(--gp-glow);
}

.deploy-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.deploy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--gp-primary-tint);
  color: var(--gp-primary-dark);
}

.deploy-card h3 {
  font-family: 'Funnel Display', serif;
  font-size: 1.625rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.deploy-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gp-primary-dark);
  background: white;
  padding: 4px 9px;
  border-radius: var(--r-full);
  border: 1px solid var(--gp-primary-tint);
  margin-left: auto;
}

.deploy-card p {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
}

.deploy-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-soft);
}

.deploy-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 12px;
  color: var(--color-text);
}

.deploy-list li::before {
  content: '✓';
  color: var(--gp-primary);
  font-weight: 700;
  flex-shrink: 0;
}

/* metrics override */
.metrics-gespage .metric-number::after { background: var(--gp-primary); }

/* 3 metrics en Gespage (no 4) — override del grid global repeat(4) */
.metrics-gespage .metrics-grid {
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .metrics-gespage .metrics-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .metrics-gespage .metrics-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}

/* "hasta" prefix arriba del número (block) — comunica "rango aproximado" */
.metrics-gespage .metric-prefix {
  display: block;
  margin-bottom: 6px;
  font-size: 0.95rem;
  color: var(--gp-primary);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

/* ─────────────────────────────────────────────
   Real dashboard (image-based)
   ───────────────────────────────────────────── */
.dashboard-mockup-real {
  position: relative;
}

.dm-image-wrap {
  background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
  padding: 0;
  position: relative;
  overflow: hidden;
}

.dm-image-wrap img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: top center;
}

/* Annotations (reused pattern but specific positioning for image-based dashboard) */
.dashboard-mockup-real .dm-annotations {
  display: none;
}

@media (min-width: 1280px) {
  .dashboard-mockup-real .dm-annotations { display: block; }
}

.dashboard-mockup-real .dm-annot {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.dashboard-mockup-real .dm-annot-1 { top: 14%; right: -260px; }
.dashboard-mockup-real .dm-annot-2 { top: 50%; right: -260px; }
.dashboard-mockup-real .dm-annot-3 { bottom: 12%; left: -250px; }
.dashboard-mockup-real .dm-annot-3 { flex-direction: row-reverse; }

.dashboard-mockup-real .dm-annot-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--gp-primary);
  box-shadow: 0 0 0 4px var(--gp-primary-tint);
  flex-shrink: 0;
  position: relative;
}

.dashboard-mockup-real .dm-annot-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--gp-primary);
  opacity: 0.4;
  animation: pulse-ring-gp 2s ease-out infinite;
}

@keyframes pulse-ring-gp {
  0% { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(2); opacity: 0; }
}

.dashboard-mockup-real .dm-annot-card {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: 0.625rem 0.875rem;
  box-shadow: var(--shadow-md);
  max-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dashboard-mockup-real .dm-annot-card strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink);
}

.dashboard-mockup-real .dm-annot-card span {
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* ─────────────────────────────────────────────
   Dashboard extras (secondary screenshots row)
   ───────────────────────────────────────────── */
.dashboard-extras {
  margin-top: var(--space-12);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .dashboard-extras { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}

.dash-extra {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dash-extra-img {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 14px 30px -8px rgba(103, 141, 214, 0.15);
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}

.dash-extra:hover .dash-extra-img {
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -16px var(--gp-glow);
}

.dash-extra-img img {
  display: block;
  width: 100%;
  height: auto;
}

.dash-extra figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 var(--space-2);
}

.dash-extra figcaption strong {
  font-family: 'Funnel Display', serif;
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--color-ink);
}

.dash-extra figcaption span {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ─────────────────────────────────────────────
   Deploy grid — 2 cards version
   ───────────────────────────────────────────── */
.deploy-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .deploy-grid-2 { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}

/* ─────────────────────────────────────────────
   Stratus cross-link banner
   ───────────────────────────────────────────── */
.stratus-banner {
  position: relative;
  margin-top: var(--space-12);
  border-radius: var(--r-2xl);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, #1e3870 0%, #2c4d92 50%, #3f5fa8 100%);
  color: white;
  padding: var(--space-10) var(--space-8);
}

.stratus-banner-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
}

.stratus-banner-bg::before,
.stratus-banner-bg::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
}

.stratus-banner-bg::before {
  width: 320px; height: 320px;
  top: -120px; right: -80px;
  background: radial-gradient(circle, #96c827 0%, transparent 65%);
}

.stratus-banner-bg::after {
  width: 280px; height: 280px;
  bottom: -120px; left: -50px;
  background: radial-gradient(circle, #8aa3d4 0%, transparent 65%);
  opacity: 0.6;
}

.stratus-banner-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
  position: relative;
}

@media (min-width: 768px) {
  .stratus-banner-content {
    grid-template-columns: 1fr auto;
    gap: var(--space-10);
  }
}

.stratus-banner-text { display: flex; flex-direction: column; gap: var(--space-3); }

.stratus-banner-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #a8bce3;
  margin-bottom: var(--space-1);
}

.stratus-banner-cloud {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(125, 211, 252, 0.15);
  color: #a8bce3;
}

.stratus-banner h3 {
  font-family: 'Funnel Display', serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: white;
}

.stratus-banner h3 em {
  font-weight: 400;
  font-style: italic;
  background: linear-gradient(135deg, #a8bce3 0%, #8aa3d4 60%, #96c827 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stratus-banner p {
  font-size: var(--text-base);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  max-width: 540px;
}

.stratus-banner-cta {
  background: white;
  color: #3f5fa8;
  white-space: nowrap;
  box-shadow: 0 8px 24px -8px rgba(255, 255, 255, 0.2);
}

.stratus-banner-cta:hover {
  background: #f5f7fc;
  color: #1e3870;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -6px rgba(255, 255, 255, 0.3);
}

/* ─────────────────────────────────────────────
   Placeholder tag (CMS handoff hint)
   ───────────────────────────────────────────── */
.placeholder-tag {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 4;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.92);
  padding: 4px 10px;
  border-radius: var(--r-full);
  border: 1px dashed var(--color-border);
  pointer-events: none;
}

@media (max-width: 768px) {
  .placeholder-tag { display: none; }
}

/* ─────────────────────────────────────────────
   Integrations (with Microsoft highlight)
   ───────────────────────────────────────────── */
.integrations { padding: var(--space-32) 0; background: var(--color-bg); }

.int-grid-gespage {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (min-width: 1024px) {
  .int-grid-gespage {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

.int-microsoft {
  background: linear-gradient(135deg, #3f5fa80d 0%, white 60%);
  border: 1px solid rgba(0, 120, 212, 0.18);
  border-radius: var(--r-xl);
  padding: var(--space-10) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .int-microsoft { padding: var(--space-12) var(--space-10); }
}

.int-microsoft-head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.int-microsoft-mark {
  display: inline-flex;
  background: white;
  padding: 8px;
  border-radius: var(--r-md);
  border: 1px solid var(--color-border-soft);
}

.int-microsoft-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #3f5fa8;
  display: block;
  margin-bottom: 2px;
}

.int-microsoft h3 {
  font-family: 'Funnel Display', serif;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.int-microsoft-desc {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
}

.int-ms-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px dashed rgba(0, 120, 212, 0.2);
}

.int-ms-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.ms-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.int-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.int-cat {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}

.int-cat:first-child { margin-top: 0; }

.int-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.int-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.4375rem 0.75rem;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
  transition: all var(--t-fast) var(--ease-out);
  cursor: default;
}

.int-chip:hover {
  border-color: var(--gp-primary);
  color: var(--gp-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px var(--gp-glow);
}

.int-chip-ghost {
  background: var(--color-bg-soft);
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  color: var(--color-text-muted);
}

/* ─────────────────────────────────────────────
   CTA Final
   ───────────────────────────────────────────── */
.cta-final-gespage { background: linear-gradient(180deg, #f5f7fc 0%, #fefefe 100%); }

.cta-product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 1024px) {
  .cta-product-grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-12);
  }
}

.cta-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 640px) { .cta-options { grid-template-columns: 1fr 1fr; gap: var(--space-4); } }

.cta-option {
  position: relative;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-md);
  transition: all var(--t-mid) var(--ease-out);
}

.cta-option:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -16px var(--gp-glow);
  border-color: var(--gp-primary-tint);
}

.cta-option-secondary {
  background: var(--color-bg-soft);
  box-shadow: none;
}

.cta-option-tag {
  position: absolute;
  top: -10px;
  left: var(--space-5);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: white;
  background: var(--gp-primary);
  padding: 4px 10px;
  border-radius: var(--r-full);
}

.cta-option-secondary .cta-option-tag { background: var(--color-ink); }

.cta-option h3 {
  font-family: 'Funnel Display', serif;
  font-size: 1.625rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin-top: var(--space-2);
}

.cta-option p {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
  flex: 1;
}

.cta-option-meta {
  font-size: 11px;
  color: var(--color-text-muted);
  text-align: center;
}

/* ─────────────────────────────────────────────
   Pantallas reales del producto (mismo patrón que Docuo/MPS)
   Hero: laptop con iconos/tarjetas flotantes (imagen transparente → drop-shadow).
   Tour: laptop limpio, centrado con ancho máximo. Sombra en azul Gespage.
   Reemplazan los mockups CSS .gp-hero-scene y .gp-tour-scene (ahora muertos).
   ───────────────────────────────────────────── */
.gp-shot-hero { margin: 0; }
.gp-shot-hero img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 48px rgba(103, 141, 214, 0.28));
}

@media (min-width: 1024px) {
  /* Más aire para el visual (la laptop es el "wow"); sin bleed porque la captura
     ya trae tarjetas flotantes en ambos bordes (no clippar). */
  .page-gespage .product-hero-grid { grid-template-columns: 1fr 1.1fr; }
}

.gp-shot-tour {
  margin: 0 auto;
  max-width: 1120px;
}
.gp-shot-tour img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 26px 50px rgba(103, 141, 214, 0.20));
}