/* ============================================================
   QuVi Pro · Escritorio — Descubre QuVi Pro (tour / bienvenida)
   Modal centrado (scale + fade). Estilos canónicos del escritorio:
   bordes sólidos, contraste por color, SIN glow, SIN sparkles.
   Tokens: --brand/--brand-d/--brand-50, --ink/--mut, --line.
   ============================================================ */

.tour-backdrop{
  position:fixed; inset:0; z-index:var(--z-modal,2000);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(8,19,43,0);
  opacity:0; pointer-events:none;
  transition:opacity .22s ease, background .22s ease;
}
/* Mismo velo sólido que los modales del escritorio (.am-backdrop), sin blur. */
.tour-backdrop.is-in{
  opacity:1; pointer-events:auto;
  background:rgba(8,19,43,.48);
}

.tour-panel{
  position:relative;
  width:100%; max-width:760px; max-height:88vh;
  display:flex; flex-direction:column;
  background:var(--surface,#fff);
  border:1px solid var(--line,#e2e8f0);
  border-radius:20px;
  box-shadow:0 20px 48px rgba(15,23,42,.18);
  overflow:hidden;
  transform:translateY(8px) scale(.965);
  transition:transform .26s cubic-bezier(.22,.61,.36,1);
}
.tour-backdrop.is-in .tour-panel{ transform:translateY(0) scale(1); }

/* Botón cerrar (círculo suave, no X rojo) */
.tour-x{
  position:absolute; top:16px; right:18px;
  width:32px; height:32px; border:0; border-radius:999px;
  background:var(--fill,#f4f6fa); color:var(--ink,#0f172a);
  display:grid; place-items:center; cursor:pointer;
  transition:background .14s ease, transform .14s ease;
}
.tour-x:hover{ background:var(--line,#e2e8f0); }
.tour-x:active{ transform:scale(.94); }
.tour-x .tour-ico{ width:17px; height:17px; }

/* Encabezado — separador con aire (no pegado al contenido) */
.tour-head{
  padding:24px 28px 22px;
  border-bottom:1px solid var(--line,#e2e8f0);
}
/* Banda del robot: ancho completo bajo las 6 capacidades. Clickeable → Mi robot. */
.tour-robot-band{
  grid-column:1 / -1;
  width:100%; appearance:none; font:inherit; text-align:left; cursor:pointer;
  display:flex; align-items:center; gap:13px;
  margin-top:2px; padding:13px 15px;
  border:1px solid var(--line,#e2e8f0); border-radius:14px;
  background:var(--fill,#f4f6fa);
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.tour-robot-band:hover{
  border-color:color-mix(in oklch, var(--brand,#0d99ff) 45%, var(--line,#e2e8f0) 55%);
  background:color-mix(in oklch, var(--brand,#0d99ff) 5%, var(--surface,#fff) 95%);
  transform:translateY(-1px);
}
.tour-robot-band:focus-visible{ outline:none; border-color:var(--brand,#0d99ff); }
.tour-robot-band:active{ transform:translateY(0); }
.tour-robot-fig{ flex:0 0 auto; display:flex; }
.tour-robot-fig .qv-robot{ --rh:34px; }
/* Ojos en px enteros: evita que uno quede 1px más ancho por redondeo subpixel. */
.tour-robot-fig .qv-robot-eye{ width:8px; height:16px; }
.tour-robot-tx{ flex:1 1 auto; display:flex; flex-direction:column; gap:3px; min-width:0; }
.tour-robot-tx strong{ font-size:14.5px; font-weight:600; letter-spacing:-.01em; color:var(--ink,#0f172a); }
.tour-robot-tx span{ font-size:12.5px; font-weight:400; line-height:1.45; color:var(--mut,#475569); }
.tour-robot-go{ flex:0 0 auto; width:18px; height:18px; color:var(--faint,#94a3b8); opacity:0; transform:translateX(-3px); transition:opacity .15s ease, transform .15s ease, color .15s ease; }
.tour-robot-band:hover .tour-robot-go{ opacity:1; transform:translateX(0); color:var(--brand-d,#0a7dd6); }
.tour-eyebrow{
  display:block; margin:0 0 7px;
  font-size:11px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  color:var(--brand-d,#0a7dd6);
}
.tour-title{
  margin:0; font-size:24px; font-weight:700; letter-spacing:-.02em; line-height:1.2;
  color:var(--ink,#0f172a);
}
.tour-sub{
  margin:6px 0 0; max-width:60ch;
  font-size:14px; font-weight:400; line-height:1.5; color:var(--mut,#475569);
}

/* Cuerpo: grilla de capacidades (con aire bajo el separador del header) */
.tour-body{
  flex:1 1 auto; overflow-y:auto;
  padding:22px 28px 8px;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px;
}

.tour-card{
  display:flex; align-items:flex-start; gap:13px; text-align:left;
  padding:14px 14px 15px;
  background:var(--surface,#fff);
  border:1px solid var(--line,#e2e8f0); border-radius:14px;
  cursor:pointer; appearance:none; font:inherit;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.tour-card:hover{
  border-color:color-mix(in oklch, var(--brand,#0d99ff) 45%, var(--line,#e2e8f0) 55%);
  background:color-mix(in oklch, var(--brand,#0d99ff) 4%, var(--surface,#fff) 96%);
  transform:translateY(-1px);
}
.tour-card:focus-visible{
  outline:none;
  border-color:var(--brand,#0d99ff);
}
.tour-card:active{ transform:translateY(0); }

.tour-card-ic{
  flex:0 0 auto; width:38px; height:38px; border-radius:11px;
  display:grid; place-items:center;
  background:var(--brand-50,#e5f3ff);
  color:var(--brand-d,#0a7dd6);
  border:1px solid color-mix(in oklch, var(--brand,#0d99ff) 18%, transparent);
}
.tour-card-ic .tour-ico{ width:19px; height:19px; }

.tour-card-tx{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.tour-card-tx strong{
  font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--ink,#0f172a);
}
.tour-card-tx span{
  font-size:12.5px; font-weight:400; line-height:1.45; color:var(--mut,#475569);
}

.tour-card-go{
  flex:0 0 auto; width:18px; height:18px; margin-top:9px;
  color:var(--faint,#94a3b8);
  opacity:0; transform:translateX(-3px);
  transition:opacity .15s ease, transform .15s ease, color .15s ease;
}
.tour-card:hover .tour-card-go{ opacity:1; transform:translateX(0); color:var(--brand-d,#0a7dd6); }

/* Pie — sin separador (iba muy pegado a los botones) */
.tour-foot{
  padding:8px 28px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.tour-foot-note{
  font-size:12.5px; color:var(--faint,#94a3b8); flex:1 1 auto; min-width:0;
}
.tour-foot-actions{ flex:0 0 auto; display:flex; gap:10px; }

.tour-btn{
  appearance:none; font:inherit; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:600; min-height:38px; padding:0 18px;
  border-radius:999px; border:1px solid transparent;
  transition:background .14s ease, border-color .14s ease, color .14s ease, transform .12s ease;
}
.tour-btn:hover{ text-decoration:none; }
.tour-btn:active{ transform:scale(.98); }
.tour-btn--primary{
  background:var(--brand,#0d99ff); color:#fff; border-color:var(--brand,#0d99ff);
}
.tour-btn--primary:hover{
  background:color-mix(in oklch, var(--brand,#0d99ff) 88%, black 12%);
  border-color:color-mix(in oklch, var(--brand,#0d99ff) 88%, black 12%);
}
.tour-btn--ghost{
  background:transparent; color:var(--ink,#0f172a); border-color:var(--line,#e2e8f0);
}
.tour-btn--ghost:hover{
  background:var(--fill,#f4f6fa); border-color:var(--separator-hover,#d5dbe5);
}

/* Botón brújula en el topbar: idéntico a los demás tb-btn (ícono 14px). */
.tb-tour svg{ width:14px; height:14px; }
.tb-tour.is-active{ border-color:var(--brand); color:var(--brand-d); background:var(--brand-50); }

/* Responsive: una columna en pantallas chicas */
@media (max-width:640px){
  .tour-body{ grid-template-columns:1fr; }
  .tour-foot{ flex-direction:column; align-items:stretch; }
  .tour-foot-actions{ justify-content:flex-end; }
  .tour-title{ font-size:21px; }
}

@media (prefers-reduced-motion:reduce){
  .tour-panel{ transition:none; transform:none; }
  .tour-backdrop{ transition:opacity .12s ease; }
}