/* ============================================================
   HUBENTS WEB — tokens portados 1:1 de la app (globals.css)
   La web ES la app: mismo lienzo, misma tinta, mismo azul.
   ============================================================ */
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dmsans-latin.woff2') format('woff2');
  font-weight: 100 1000;
  font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A, U+201C-201E, U+2026, U+20AC;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dmsans-latin-ext.woff2') format('woff2');
  font-weight: 100 1000;
  font-display: optional;
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0;
}

:root {
  /* Canvas — mono (neutro). Sin arena: los fondos "especiales" van a gris neutro */
  --bg-app: #F6F6F7;
  --bg-panel: #FFFFFF;
  --bg-subtle: #ECECF0;   /* gris neutro: rellenos pequeños (tracks, tiles, hovers, chips) */
  --bg-arena: #ECECF0;    /* RETIRADO: el arena ya no se usa; repunta a neutro por compatibilidad */
  --bg-hover: #EFEFF1;
  /* Alto único de la PANTALLA de todos los teléfonos de chat: garantiza que el
     marco visible mida igual aunque una escena lleve botones y otra no. Móvil lo baja abajo */
  --wa-h: 607px;
  /* Ink */
  --ink-1: #1A1A1A;
  --ink-2: #4A4A4A;
  --ink-3: #8A8A8A;
  --ink-cap: #6B6B6B; /* microcopy sobre el gris claro: AA */
  --ink-4: #B4B4B8;
  /* Lines */
  --line-1: #E6E6EA;
  --line-2: #ECECF0;
  --line-strong: #D6D6DB;
  /* Action */
  --primary: #2563EB;
  --primary-hover: #1D4ED8;
  /* Brand (momentos de identidad) */
  --brand: #1A1A1A;
  --brand-ink: #FFFFFF;
  /* Tonales */
  --success: #00B66D; --success-bg: #E0F5EC; --success-ink: #007A49;
  --warn: #F4B942;    --warn-bg: #FDF3DC;    --warn-ink: #8A6B1E;
  --danger: #E85D4E;  --danger-bg: #FCE6E2;  --danger-ink: #B03A2E;
  --info-bg: #DCE8F5; --info-ink: #1F4A87;
  --violet-bg: #EDE9FE; --violet-ink: #5B21B6;
  --tag-wedding-bg: #FCE0DA; --tag-wedding-ink: #B03A2E;
  /* Avatares */
  --av-green: #00B66D; --av-yellow: #F4B942; --av-coral: #E85D4E;
  --av-blue: #5B8FE8; --av-purple: #9B7EDB; --av-teal: #3DB6A8;
  /* Radios */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;
  /* Sombras */
  --shadow-1: 0 1px 2px rgba(18,18,24,.05);
  --shadow-2: 0 1px 3px rgba(18,18,24,.06), 0 1px 2px rgba(18,18,24,.04);
  --shadow-pop: 0 10px 30px -8px rgba(18,18,24,.16), 0 2px 6px rgba(18,18,24,.06);
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg-app);
  color: var(--ink-1);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { text-wrap: balance; letter-spacing: -0.025em; line-height: 1.12; }
p { text-wrap: pretty; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ============ Botones (idénticos a la app) ============ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font); font-size: 15px; font-weight: 600; line-height: 1.2;
  padding: 10px 22px; border-radius: 10px; border: none; cursor: pointer;
  text-decoration: none; transition: background .15s, transform .15s var(--ease), box-shadow .15s;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-pop); }
.btn-ghost { background: transparent; color: var(--ink-1); border: 1px solid var(--line-strong); }
.btn-ghost:hover { background: var(--bg-hover); }
.btn-brand { background: var(--brand); color: var(--brand-ink); }
.btn-brand:hover { background: #2A2A2A; }

/* Halo «tócame»: anillo azul latiendo para señalar elementos interactivos de las
   maquetas/escenas (invitación de proveedor, etc.). Se para al pasar el ratón. */
@keyframes cta-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .45); }
  70% { box-shadow: 0 0 0 12px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
.pulse-cta { animation: cta-pulse 1.8s var(--ease) infinite; }
.pulse-cta:hover { animation: none; }
@media (prefers-reduced-motion: reduce) { .pulse-cta { animation: none; } }

/* ============ Nav ============ */
nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,249,245,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-1);
}
.nav-inner { display: flex; align-items: center; justify-content: flex-start; height: 66px; padding: 0; }
.nav-logo img { height: 26px; width: auto; }
.nav-links { display: flex; gap: 32px; list-style: none; margin-left: 36px; }
.nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: var(--ink-2); transition: color .15s; }
.nav-links a:hover { color: var(--ink-1); }
.nav-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nav-actions .entrar { font-size: 15px; font-weight: 500; color: var(--primary); margin-right: 4px; text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.nav-actions .entrar:hover { color: var(--primary-hover); }
.nav-actions .btn { padding: 10px 20px; font-size: 15px; }

/* ============ Hero ============ */
.hero { padding: 88px 0 0; text-align: center; }
.hero h1 {
  font-size: clamp(2.5rem, 5.6vw, 4.1rem);
  font-weight: 700;
  max-width: 21ch;
  margin: 0 auto 14px;
}
.hero h1 em { font-style: normal; color: var(--primary); }
.hero .sub {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--ink-2);
  max-width: 54ch;
  margin: 0 auto 34px;
}
.hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-micro { margin-top: 16px; font-size: 14px; color: var(--ink-cap); }

/* ============ Marco de navegador para las pantallas ============ */
.browser {
  background: var(--bg-panel);
  border: 1px solid var(--line-1);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  text-align: left;
}
.browser-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-2);
  background: var(--bg-panel);
}
.browser-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.browser-bar .url {
  margin-left: 12px; flex: 1; max-width: 320px;
  background: var(--bg-subtle); border-radius: var(--r-pill);
  font-size: 12px; color: var(--ink-3); padding: 4px 14px; text-align: center;
}
.hero-shot { margin: 64px auto -2px; max-width: 1180px; }
.hero-shot .browser { border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: none; }

/* ============ Recreación de la app (shell) ============ */
.app-mock { display: grid; grid-template-columns: 218px 1fr; background: var(--bg-app); font-size: 13px; }
.mock-side {
  background: var(--bg-panel); border-right: 1px solid var(--line-1);
  padding: 16px 12px; display: flex; flex-direction: column; gap: 2px;
}
.mock-side .logo { height: 20px; width: auto; margin: 2px 6px 14px; align-self: flex-start; }
.tenant-chip {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line-1); border-radius: var(--r-md);
  padding: 8px 10px; margin-bottom: 14px;
}
.tenant-chip .iso {
  width: 26px; height: 26px; border-radius: var(--r-sm);
  background: var(--brand); color: #fff;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
}
.tenant-chip b { font-size: 12.5px; display: block; line-height: 1.2; }
.tenant-chip span { font-size: 10.5px; color: var(--ink-3); }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: var(--r-sm);
  color: var(--ink-2); font-weight: 500; font-size: 12.5px;
}
.nav-item svg { width: 15px; height: 15px; color: currentColor; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.nav-item.active { background: var(--bg-hover); color: var(--ink-1); font-weight: 600; }
.sofia-tile {
  margin-top: 12px; background: var(--bg-subtle); border-radius: var(--r-md);
  padding: 12px; text-align: center; font-weight: 600; font-size: 12px; color: var(--ink-2);
}
.mock-main { padding: 18px 22px; min-width: 0; }
.mock-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.mock-topbar h4 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.mock-topbar .right { display: flex; align-items: center; gap: 8px; }
.chip-ghost {
  border: 1px solid var(--line-1); border-radius: var(--r-pill);
  padding: 5px 12px; font-size: 11.5px; font-weight: 500; color: var(--ink-2); background: var(--bg-panel);
}
.chip-dark { background: var(--brand); color: #fff; border-radius: var(--r-pill); padding: 5px 12px; font-size: 11.5px; font-weight: 600; }

/* ============ Piezas de UI (idénticas a la app) ============ */
.pill { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--r-pill); padding: 3px 10px; font-size: 10.5px; font-weight: 600; }
.pill-success { background: var(--success-bg); color: var(--success-ink); }
.pill-warn { background: var(--warn-bg); color: var(--warn-ink); }
.pill-danger { background: var(--danger-bg); color: var(--danger-ink); }
.pill-info { background: var(--info-bg); color: var(--info-ink); }
.pill-violet { background: var(--violet-bg); color: var(--violet-ink); }
.pill-wedding { background: var(--tag-wedding-bg); color: var(--tag-wedding-ink); }
.microlabel { font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.av { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: 9px; font-weight: 700; border: 1.5px solid #fff; }
.av-stack { display: inline-flex; }
.av-stack .av + .av { margin-left: -6px; }
.card {
  background: var(--bg-panel); border: 1px solid var(--line-1);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}

/* Workspace del evento (hero) */
.event-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.event-head .title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.event-head h5 { font-size: 15px; font-weight: 700; }
.event-head .meta { font-size: 11.5px; color: var(--ink-3); }
.progress { height: 5px; border-radius: var(--r-pill); background: var(--bg-subtle); overflow: hidden; margin: 4px 0 16px; }
.progress i { display: block; height: 100%; width: 68%; background: var(--success); border-radius: var(--r-pill); }
.stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stage-col .stage-name { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; padding: 0 2px; }
.stage-col .stage-name b { font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.stage-col .stage-name span { font-size: 10px; color: var(--ink-3); }
.task-card { padding: 11px 12px; margin-bottom: 9px; }
.task-card .t-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 7px; }
.task-card b { font-size: 12px; font-weight: 600; line-height: 1.35; }
.task-card .t-foot { display: flex; justify-content: space-between; align-items: center; }
.task-card .due { font-size: 10px; color: var(--ink-3); }

/* ============ Secciones ============ */
section { padding: 96px 0; }
.sec-head { max-width: 60ch; margin-bottom: 56px; }
.sec-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 700; margin-bottom: 10px; }
.sec-head p { font-size: 1.1rem; color: var(--ink-2); }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.feature { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.feature.flip .f-copy { order: 2; }
.feature.flip .f-visual { order: 1; }
/* SofIA: el visual lleva teléfono + tarjeta debajo; alineamos el texto con el
   centro del teléfono (no de la columna entera) subiéndolo un poco. */
@media (min-width: 901px) {
  #sofia .feature { align-items: start; }
  #sofia .f-copy { margin-top: clamp(36px, 5vw, 78px); }
}
.f-copy h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); font-weight: 700; margin-bottom: 10px; }
.f-copy > p { font-size: 1.06rem; color: var(--ink-2); margin-bottom: 22px; }
.f-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.f-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; color: var(--ink-2); }
.f-list li b { color: var(--ink-1); font-weight: 600; }
.f-list .tick {
  flex: none; margin-top: 1px;
  background: none; color: var(--success-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; line-height: 1;
}
/* Puntos en fila bajo una escena a ancho completo */
.f-list.cols3 { flex-direction: row; gap: clamp(20px, 4vw, 48px); max-width: 940px; margin: 34px auto 0; }
.f-list.cols3 li { flex: 1; font-size: 14.5px; }
@media (max-width: 760px) { .f-list.cols3 { flex-direction: column; gap: 12px; max-width: 30rem; } }

/* Tarea colaborativa (feature 1) */
.taskhub { padding: 0; overflow: hidden; }
.taskhub-head { padding: 16px 18px 12px; border-bottom: 1px solid var(--line-2); }
.taskhub-head .row1 { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.taskhub-head h5 { font-size: 14.5px; font-weight: 700; }
.taskhub-head .meta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.taskhub-head .meta-item { font-size: 11px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.checklist { padding: 14px 18px; border-bottom: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 9px; }
.check-item { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-2); }
.check-item .box {
  width: 15px; height: 15px; border-radius: 4.5px; border: 1.5px solid var(--line-strong); flex: none;
}
.check-item.done .box { background: var(--success); border-color: var(--success); position: relative; }
.check-item.done .box::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 9px; font-weight: 800; }
.check-item.done span { text-decoration: line-through; color: var(--ink-3); }
.chat { padding: 14px 18px; display: flex; flex-direction: column; gap: 11px; background: var(--bg-app); }
.msg { display: flex; gap: 9px; align-items: flex-start; }
.msg .bubble {
  background: var(--bg-panel); border: 1px solid var(--line-2); border-radius: 4px 14px 14px 14px;
  padding: 8px 12px; font-size: 12px; color: var(--ink-2); max-width: 78%;
}
.msg .who { font-size: 10px; font-weight: 700; color: var(--ink-1); display: flex; gap: 6px; align-items: center; margin-bottom: 3px; }
.msg.me { flex-direction: row-reverse; }
.msg.me .bubble { background: var(--info-bg); border-color: transparent; border-radius: 14px 4px 14px 14px; }
.chat-input {
  margin: 0 18px 16px; border: 1px solid var(--line-1); border-radius: var(--r-md);
  padding: 9px 14px; font-size: 12px; color: var(--ink-4); background: var(--bg-panel);
  display: flex; justify-content: space-between; align-items: center;
}
.visibility-note {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 18px; border-top: 1px solid var(--line-2); background: var(--bg-panel);
  font-size: 11px; color: var(--ink-3);
}

/* SofIA (feature 2) */
#sofia { background: linear-gradient(180deg, var(--violet-bg) 0%, #F6F3FC 100%); }
.wa-phone {
  width: min(300px, 100%); border-radius: 30px; background: #111;
  padding: 9px; box-shadow: var(--shadow-pop); margin: 0 auto;
}
.wa-screen { border-radius: 22px; overflow: hidden; background: #EFE7DD; height: var(--wa-h); display: flex; flex-direction: column; }
.wa-head { flex: none; background: #075E54; color: #fff; padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.wa-head .wa-av { width: 30px; height: 30px; border-radius: 50%; background: var(--av-purple); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; }
.wa-head b { font-size: 13.5px; display: block; line-height: 1.2; }
.wa-head span { font-size: 10.5px; opacity: .8; }
.wa-body { padding: 14px 12px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; overflow: hidden; justify-content: flex-end; overflow-anchor: none; }
/* Las escenas vivas van añadiendo mensajes, filas y toasts por temporizador. Con
   overflow-anchor:auto el navegador puede reanclar el scroll a ese contenido y dar
   pequeños saltos de página al animar. Lo desactivamos en todos los contenedores de
   escena para que la ventana no se mueva sola mientras la animación corre. */
[data-fx], .fxc, .wa-body, .fxv-grid, .fxh-layer { overflow-anchor: none; }
@media (max-width: 900px) { :root { --wa-h: 527px; } }
.wa-body > .wa-msg, .wa-body > .wa-typing, .wa-body > .wa-day { flex: none; }
.wa-msg { max-width: 84%; border-radius: 10px; padding: 7px 10px 5px; font-size: 12.5px; line-height: 1.45; box-shadow: 0 1px 1px rgba(0,0,0,.08); position: relative; }
.wa-msg .time { display: block; text-align: right; font-size: 9px; color: rgba(0,0,0,.4); margin-top: 2px; }
.wa-in { background: #fff; align-self: flex-start; border-top-left-radius: 2px; }
.wa-out { background: #DCF8C6; align-self: flex-end; border-top-right-radius: 2px; }
.wa-day { align-self: center; background: rgba(255,255,255,.85); border-radius: 8px; font-size: 10px; color: var(--ink-3); padding: 3px 10px; }
.sofia-result {
  margin: 20px auto 0; width: min(340px, 100%);
  padding: 14px 16px;
}
.sofia-result .lead-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sofia-result b { font-size: 13px; }
.sofia-result .sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.sofia-result .note {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2);
  font-size: 11.5px; color: var(--ink-2); display: flex; gap: 7px; align-items: flex-start;
}

/* Finanzas (feature 3) */
.fin-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
.kpi { padding: 13px 15px; }
.kpi .microlabel { display: block; margin-bottom: 5px; }
.kpi .val { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.kpi .val.green { color: var(--success-ink); }
.kpi .val.amber { color: var(--warn-ink); }
.fin-rows { padding: 4px 0; }
.fin-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line-2); }
.fin-row:last-child { border-bottom: none; }
.fin-row .c { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fin-row .ic { width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; font-size: 12px; flex: none; }
.fin-row .ic.in { background: var(--success-bg); color: var(--success-ink); }
.fin-row .ic.out { background: var(--danger-bg); color: var(--danger-ink); }
.fin-row b { font-size: 12.5px; display: block; }
.fin-row .d { font-size: 10.5px; color: var(--ink-3); }
.fin-row .amt { font-size: 13px; font-weight: 700; white-space: nowrap; }
.fin-row .amt.in { color: var(--success-ink); }
.verifactu {
  margin-top: 12px; display: flex; align-items: center; gap: 12px; padding: 12px 16px;
}
.verifactu .qr {
  width: 44px; height: 44px; flex: none; border-radius: var(--r-xs);
  background:
    conic-gradient(var(--ink-1) 25%, transparent 0 50%, var(--ink-1) 0 75%, transparent 0) 0 0/14px 14px,
    var(--bg-subtle);
  border: 1px solid var(--line-1);
}
.verifactu b { font-size: 12.5px; display: block; }
.verifactu .d { font-size: 11px; color: var(--ink-3); }

/* Protagonistas (tabs) */
.tabs-nav { display: flex; gap: 8px; justify-content: center; margin-bottom: 40px; flex-wrap: wrap; }
.tab-btn {
  font-family: var(--font); font-size: 15px; font-weight: 600; cursor: pointer;
  padding: 10px 22px; border-radius: var(--r-pill);
  background: transparent; border: 1px solid var(--line-strong); color: var(--ink-2);
  transition: all .18s var(--ease);
}
.tab-btn:hover { background: var(--bg-hover); }
.tab-btn.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.tab-panel { display: none; }
.tab-panel.on { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.tab-panel h3 { font-size: 1.5rem; margin-bottom: 14px; }
.tab-panel .f-list { margin-top: 6px; }

/* Protagonistas — caja con barra de tabs y captura real (traído de la web actual) */
.roles-box {
  --mx: 50%; --my: -10%;
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 0.9fr 1.1fr; grid-template-rows: auto 1fr;
  column-gap: clamp(28px, 4vw, 60px); align-items: start;
  border-radius: 28px; padding: clamp(18px, 3.5vw, 44px);
  /* Cristal ácido con halo (variante clara y sutil): aurora azul muy tenue +
     halo que sigue al puntero (--mx/--my los mueve site.js). */
  background: linear-gradient(180deg, rgba(255, 255, 255, .76), rgba(244, 248, 255, .60));
  border: 1px solid rgba(37, 99, 235, .12);
  box-shadow: 0 26px 70px -48px rgba(37, 99, 235, .32), inset 0 1px 0 rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
}
.roles-box::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(60% 82% at 3% -12%, rgba(37, 99, 235, .10), transparent 60%),
    radial-gradient(52% 74% at 99% 4%, rgba(45, 212, 255, .07), transparent 62%),
    radial-gradient(60% 78% at 64% 116%, rgba(99, 102, 241, .08), transparent 60%);
}
.roles-box::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(460px circle at var(--mx) var(--my),
    rgba(37, 99, 235, .12), rgba(37, 99, 235, .04) 46%, transparent 68%);
  opacity: 0; transition: opacity .5s ease;
}
.roles-box.is-lit::after { opacity: 1; }
.roles-box > *, .roles-box .role-copy, .roles-box .role-shot { position: relative; z-index: 1; }
/* Segmented control como el de dentro de la app (reutilizable) */
.seg-tabs { width: fit-content; margin: 0 auto 40px; background: var(--bg-panel); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: 4px; gap: 4px; }
.seg-tabs .tab-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--ink-cap); font-size: 14.5px; padding: 8px 18px; border-radius: var(--r-sm); }
.seg-tabs .tab-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; flex: none; }
.seg-tabs .tab-btn:hover { background: var(--bg-hover); color: var(--ink-1); }
.seg-tabs .tab-btn.on { background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(37, 99, 235, .28); }
.roles-tabs { grid-column: 1; grid-row: 1; justify-content: flex-start; margin: 0 auto clamp(24px, 3.5vw, 44px) 0; }
.roles-box .tab-panel.on { display: contents; }
.roles-box .role-copy { grid-column: 1; grid-row: 2; align-self: start; }
.roles-box .role-copy h3 { font-size: clamp(1.45rem, 2.4vw, 2rem); margin-bottom: 9px; }
.roles-box .role-copy p { color: var(--ink-2); max-width: 48ch; }
.roles-box .role-shot { grid-column: 2; grid-row: 1 / 3; }
.role-shot { margin: 0; height: clamp(300px, 36vw, 460px); background: var(--bg-app); border: 1px solid var(--line-1); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-2); }
.role-shot img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.role-shot.shot-planner { height: auto; background: #fff; }
.role-shot.shot-planner img { height: auto; object-fit: unset; }
.role-shot.shot-proveedores img { object-fit: cover; object-position: center top; }
.mini-mock { padding: 20px; }
.mini-mock .mm-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.mini-mock .mm-head b { font-size: 14px; }
.mm-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.mm-row:last-child { border-bottom: none; }
.mm-row .l { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.mm-row .d { font-size: 11px; color: var(--ink-3); }

/* Módulos */
.modules { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 940px; margin: 0 auto; }
.module {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 22px 0; border-bottom: 1px solid var(--line-1);
}
/* Sección "Y todo lo que ya llevas encima": tarjetas que al pasar el ratón
   se elevan con un cristal ácido muy sobrio + halo que sigue al puntero. */
.modules .module {
  --mx: 50%; --my: 50%;
  position: relative; isolation: isolate;
  padding: 20px 22px; border: 1px solid var(--line-1); border-radius: var(--r-lg);
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease), background-color .26s var(--ease);
}
.modules .module::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx) var(--my), rgba(37, 99, 235, .10), transparent 70%);
  opacity: 0; transition: opacity .35s ease;
}
.modules .module.is-lit::after { opacity: 1; }
.modules .module > * { position: relative; z-index: 1; }
.modules .module:hover {
  transform: translateY(-4px);
  background-color: rgba(255, 255, 255, .55);
  border-color: rgba(37, 99, 235, .16);
  box-shadow: 0 20px 50px -30px rgba(37, 99, 235, .30), inset 0 1px 0 rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.module .m-ic {
  flex: none; width: 38px; height: 38px; border-radius: var(--r-md);
  background: var(--bg-panel); border: 1px solid var(--line-1);
  display: grid; place-items: center;
}
.module .m-ic svg { width: 17px; height: 17px; color: var(--ink-2); stroke: var(--ink-2); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.module b { font-size: 16px; font-weight: 600; display: block; margin-bottom: 3px; }
.module p { font-size: 14px; color: var(--ink-2); line-height: 1.5; }

/* Variante en tarjeta (sección "Las tareas tiran del resto"): más cuerpo,
   jerarquía y una señal clara de que cada bloque es un enlace. */
.modules-cards { grid-template-columns: 1fr 1fr; gap: 20px; }
.modules-cards .module {
  flex-direction: column; align-items: flex-start; gap: 0;
  padding: 24px 24px 20px;
  background: var(--bg-panel);
  border: 1px solid var(--line-1); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.modules-cards .module .m-ic {
  width: 46px; height: 46px; border-radius: var(--r-md);
  background: var(--bg-subtle); border-color: transparent; margin-bottom: 16px;
}
.modules-cards .module .m-ic svg { width: 21px; height: 21px; }
.modules-cards .module .m-body b { font-size: 17px; margin-bottom: 5px; }
.modules-cards .module .m-body p { font-size: 14px; color: var(--ink-2); }
.modules-cards .module .m-go {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 18px; font-size: 13.5px; font-weight: 600; color: var(--primary);
}
.modules-cards .module .m-go svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s var(--ease);
}
.modules-cards a.module:hover b { color: var(--ink-1); }
.modules-cards .module:active { transform: translateY(-1px); }
@media (hover: hover) and (pointer: fine) {
  .modules-cards .module:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); border-color: var(--line-strong); }
  .modules-cards .module:hover .m-go svg { transform: translateX(3px); }
}
@media (max-width: 640px) { .modules-cards { grid-template-columns: 1fr; } }

/* Integraciones */
.integra { text-align: center; padding-top: 0; }
.integra p.lead { color: var(--ink-2); font-size: 15px; margin-bottom: 22px; }
.chips { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.chip-int {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--bg-panel); border: 1px solid var(--line-1); border-radius: var(--r-pill);
  padding: 10px 20px; font-size: 14.5px; font-weight: 600; color: var(--ink-2);
}
.chip-int .dot-ic { width: 8px; height: 8px; border-radius: 50%; }

/* Precios */
.pricing-band {
  --mx: 50%; --my: 0%;
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--bg-panel); border: 1px solid var(--line-1); border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  padding: clamp(40px, 5.5vw, 64px); text-align: center;
}
/* Variante estándar (sin fondo inline como la violeta de crm): cristal claro con
   aurora azul ambiente + halo que sigue al puntero (--mx/--my los mueve site.js). */
.pricing-band:not(.tinted) {
  background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(244, 248, 255, .72));
  border-color: rgba(37, 99, 235, .16);
  box-shadow: 0 26px 70px -42px rgba(37, 99, 235, .40), inset 0 1px 0 rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
}
.pricing-band:not(.tinted)::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(70% 92% at 6% -12%, rgba(37, 99, 235, .16), transparent 60%),
    radial-gradient(58% 80% at 98% 4%, rgba(45, 212, 255, .13), transparent 62%),
    radial-gradient(70% 88% at 62% 116%, rgba(99, 102, 241, .13), transparent 60%);
}
.pricing-band:not(.tinted)::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(360px circle at var(--mx) var(--my),
    rgba(37, 99, 235, .20), rgba(37, 99, 235, .06) 46%, transparent 68%);
  opacity: 0; transition: opacity .5s ease;
}
.pricing-band:not(.tinted).is-lit::after { opacity: 1; }
.pricing-band > * { position: relative; z-index: 1; }
.pricing-band h2 { font-size: clamp(1.6rem, 2.6vw, 2.15rem); margin-bottom: 8px; letter-spacing: -0.03em; }
.pricing-band p { color: var(--ink-2); max-width: 52ch; margin: 0 auto 28px; }
/* Puntos: fuera del pill, check azul (como en las tarjetas de precio) */
.pricing-points { display: flex; gap: 10px 30px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px; }
.pricing-points span {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 0; font-size: 15px; color: var(--ink-1); font-weight: 600;
}
.pricing-points .tick {
  background: none; color: var(--primary); width: auto; height: auto; border-radius: 0;
  font-size: 15px; font-weight: 800; line-height: 1;
}
/* Botón de la banda estándar en azul */
.pricing-band:not(.tinted) .btn-brand { background: var(--primary); color: #fff; }
.pricing-band:not(.tinted) .btn-brand:hover { background: var(--primary-hover); }

/* FAQ */
.faq-grid { max-width: 760px; margin: 0 auto; }
details {
  background: var(--bg-panel); border: 1px solid var(--line-1); border-radius: var(--r-lg);
  margin-bottom: 10px; overflow: hidden;
}
summary {
  cursor: pointer; list-style: none; padding: 20px 24px;
  font-size: 16.5px; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
summary::-webkit-details-marker { display: none; }
summary .plus { flex: none; color: var(--ink-3); transition: transform .2s var(--ease); font-size: 20px; font-weight: 400; }
details[open] .plus { transform: rotate(45deg); }
details .a { padding: 0 24px 22px; color: var(--ink-2); font-size: 15.5px; max-width: 68ch; }

/* CTA final — panel «cristal azul»: aurora ambiente fija + halo que sigue al
   puntero (--mx/--my los mueve site.js). El posicionamiento del cursor solo
   se activa en punteros finos; en táctil y con reduced-motion queda la aurora. */
.final {
  --mx: 50%; --my: -10%;   /* halo en reposo: arriba-centro */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--brand-ink);
  background:
    radial-gradient(130% 120% at 50% -15%, #1c2338 0%, #13151f 46%, #0d0e14 100%);
  border-radius: var(--r-xl);
  padding: clamp(48px, 7vw, 88px) clamp(28px, 5vw, 80px);
  text-align: center;
  box-shadow:
    0 34px 90px -44px rgba(37, 99, 235, .55),   /* la levanta del lienzo crema */
    inset 0 1px 0 rgba(255, 255, 255, .07),      /* filo de cristal superior */
    inset 0 0 0 1px rgba(120, 170, 255, .10);    /* borde interior azulado */
}
/* Aurora ambiente: siempre presente, así el bloque nunca se ve negro y plano */
.final::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 85% at 12% -5%, rgba(37, 99, 235, .30), transparent 60%),
    radial-gradient(55% 75% at 96% 12%, rgba(45, 212, 255, .16), transparent 62%),
    radial-gradient(60% 80% at 62% 112%, rgba(99, 102, 241, .22), transparent 60%);
}
/* Halo del puntero: brilla y sigue al cursor (screen = luz que se suma) */
.final::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background: radial-gradient(300px circle at var(--mx) var(--my),
    rgba(140, 185, 255, .32), rgba(56, 132, 255, .12) 42%, transparent 66%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .5s ease;
}
.final.is-lit::after { opacity: 1; }
.final > * { position: relative; z-index: 1; }
.final h2 {
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-bottom: 12px;
  text-wrap: balance; text-shadow: 0 1px 30px rgba(6, 10, 24, .35);
}
.final p { color: rgba(255,255,255,.74); font-size: 1.1rem; max-width: 48ch; margin: 0 auto 32px; }
.final .btn-primary { font-size: 15px; padding: 12px 28px; }
.final .micro { margin-top: 16px; font-size: 13.5px; color: rgba(255,255,255,.55); }
@media (prefers-reduced-motion: reduce) {
  .final::after, .pricing-band::after { transition: none; }
}

/* CTA doble: «Prueba gratis 14 días» + «Empieza gratis con Google» */
.btn-google {
  background: #fff; color: var(--ink-1);
  border: 1px solid var(--line-strong);
  display: inline-flex; align-items: center; gap: 9px;
}
.btn-google img { width: 18px; height: 18px; flex: none; }
.btn-google:hover { background: var(--bg-hover); transform: translateY(-1px); box-shadow: var(--shadow-1); }
.final .btn-light {
  background: #fff; color: var(--ink-1);
  font-size: 15px; padding: 12px 28px;
}
.final .btn-light:hover { transform: translateY(-1px); box-shadow: var(--shadow-pop); }
.final .btn-google {
  background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
  font-size: 15px; padding: 12px 28px;
}
.final .btn-google:hover { background: rgba(255, 255, 255, .08); transform: translateY(-1px); box-shadow: none; }

/* Footer */
footer { border-top: 1px solid var(--line-1); padding: 56px 0 40px; margin-top: 96px; }
.foot-grid { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 44px; }
.foot-brand img { height: 24px; width: auto; margin-bottom: 12px; }
.foot-brand p { font-size: 13.5px; color: var(--ink-cap); max-width: 30ch; }
/* Eslogan de marca en el footer: «** Dinos ‘sí, quiero’…» en una fila,
   «y el resto lo organiza Hubents» debajo */
.foot-brand .foot-slogan { font-size: 14px; color: var(--ink-2); max-width: 32ch; line-height: 1.55; }
.foot-slogan .ast {
  font-size: 20px; font-weight: 800;
  color: var(--ink-1); letter-spacing: 1px;
  vertical-align: -3px; margin-right: 2px;
}
.foot-slogan b { color: var(--ink-1); font-size: 15px; }
/* Descarga de la app en el footer (estilo Holded: QR + tiendas) */
.foot-dl { margin-top: 0; }
.foot-brand .foot-dl-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-cap); margin-bottom: 12px; }
.foot-quick { margin-top: 24px; }
.foot-quick a { display: block; text-decoration: none; font-size: 13.5px; color: var(--ink-cap); margin-bottom: 9px; }
.foot-quick a:hover { color: var(--ink-1); }
.foot-dl-row { display: flex; gap: 12px; align-items: stretch; }
.foot-brand img.foot-qr {
  width: 78px; height: 78px; flex: none; margin: 0;
  background: #fff; border: 1px solid var(--line-1); border-radius: 10px;
  padding: 5px;
}
.foot-stores { display: flex; flex-direction: column; gap: 4px; justify-content: space-between; }
.store-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--brand); color: #fff;
  border-radius: 9px; padding: 5px 10px; min-width: 128px;
  text-decoration: none;
}
.store-btn:hover { background: #2A2A2A; }
.store-btn svg { width: 15px; height: 15px; flex: none; }
.store-btn span { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store-btn i { font-style: normal; font-size: 7.5px; letter-spacing: .02em; opacity: .75; }
.store-btn b { font-size: 11.5px; }
.foot-lang { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 13.5px; }
.foot-lang svg { width: 16px; height: 16px; flex: none; stroke: var(--ink-cap); stroke-width: 1.4; fill: none; }
.foot-lang .on { font-weight: 600; color: var(--ink-1); }
.foot-lang a { text-decoration: none; color: var(--ink-cap); }
.foot-lang a:hover { color: var(--ink-1); }
.foot-cols { display: flex; gap: clamp(28px, 4vw, 56px); flex-wrap: wrap; }
.foot-col b { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-cap); margin-bottom: 12px; }
.foot-col b.sub { margin-top: 20px; }
.foot-col a { display: block; text-decoration: none; font-size: 13.5px; color: var(--ink-cap); margin-bottom: 9px; }
.foot-col a:hover { color: var(--ink-1); }
/* En escritorio: marca + 5 columnas caben en una sola fila */
@media (min-width: 901px) {
  .foot-grid { flex-wrap: nowrap; align-items: flex-start; gap: clamp(28px, 3.5vw, 64px); }
  .foot-cols { flex: 1; flex-wrap: nowrap; justify-content: space-between; gap: clamp(16px, 2.2vw, 40px); }
  .foot-col { min-width: 0; }
}
/* Wordmark de marca a lo ancho del menú, como capa tenue debajo de todo el footer */
.foot-wordmark {
  width: 100%; aspect-ratio: 708 / 130;
  background: url(logo-dark.png) center / contain no-repeat;
  opacity: .08; margin: 6px 0 0; user-select: none;
}
.foot-base { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line-2); padding-top: 24px; font-size: 12.5px; color: var(--ink-cap); }
.foot-base .socials { display: flex; gap: 18px; }
.foot-base a { text-decoration: none; color: var(--ink-cap); }
.foot-base a:hover { color: var(--ink-1); }

/* ============ Motion ============ */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
/* Hilo de continuidad: corta y conecta el hero con la sección siguiente.
   Se "dibuja" hacia abajo al entrar en pantalla (scaleY desde arriba). */
.section-thread { display: block; width: 2px; height: 72px; margin: 4px auto 0; border-radius: 2px;
  background: linear-gradient(to bottom, rgba(37, 99, 235, .5), rgba(37, 99, 235, 0)); }
.js .reveal.section-thread { opacity: 1; transform: scaleY(0); transform-origin: top center; transition: transform .7s var(--ease); }
.js .reveal.section-thread.in { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) { .js .reveal.section-thread { transform: none; } }
/* Globo de WhatsApp que "cae" del hilo: el mensaje que desata el baile */
.hero-drop { display: flex; justify-content: center; margin: 6px auto 0; padding: 0 20px; }
.hero-drop-bubble {
  position: relative; max-width: 340px; text-align: left; background: #fff;
  border-radius: 14px; border-top-left-radius: 4px; padding: 11px 15px 9px;
  font-size: 14px; line-height: 1.45; color: var(--ink-1);
  box-shadow: 0 12px 32px -16px rgba(18, 18, 24, .3), 0 1px 2px rgba(0, 0, 0, .06);
}
.hero-drop-tag { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #128C7E; margin-bottom: 3px; }
.hero-drop-tag img { width: 13px; height: 13px; }
.hero-drop-time { display: block; text-align: right; font-size: 10px; color: rgba(0, 0, 0, .4); margin-top: 3px; }
.js .reveal.hero-drop { transform: translateY(10px) scale(.92); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: .3s; }
.js .reveal.hero-drop.in { transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal.hero-drop { transform: none; transition-delay: 0s; } }
.js .wa-msg { opacity: 0; transform: translateY(8px) scale(.97); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.js .wa-body.play .wa-msg { opacity: 1; transform: none; }
.js .wa-body.play .wa-msg:nth-child(2) { transition-delay: .15s; }
.js .wa-body.play .wa-msg:nth-child(3) { transition-delay: .9s; }
.js .wa-body.play .wa-msg:nth-child(4) { transition-delay: 1.7s; }
.js .wa-body.play .wa-msg:nth-child(5) { transition-delay: 2.4s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .wa-msg { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============ Nav: desplegables ============ */
.nav-links > li { position: relative; display: flex; align-items: center; height: 66px; }
.nav-links a.on { color: var(--ink-1); font-weight: 600; }
.has-menu > a { display: inline-flex; align-items: center; gap: 5px; }
.has-menu .chev {
  width: 10px; height: 10px; margin-top: 2px;
  stroke: currentColor; stroke-width: 1.8; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s var(--ease);
}
.has-menu:hover > a .chev, .has-menu:focus-within > a .chev { transform: rotate(180deg); }
.nav-drop {
  position: absolute; top: 100%; left: 50%; z-index: 60;
  transform: translate(-50%, 6px); padding-top: 10px;
  opacity: 0; visibility: hidden;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s;
}
.has-menu:hover .nav-drop, .has-menu:focus-within .nav-drop {
  opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s;
}
.drop-panel {
  background: var(--bg-panel); border: 1px solid var(--line-1);
  border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
  padding: 8px; min-width: 296px; isolation: isolate;
}
.drop-panel a { display: block; padding: 9px 12px; border-radius: var(--r-sm); text-decoration: none; white-space: nowrap; }
.drop-panel a:hover { background: var(--bg-subtle); }
.drop-panel a b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink-1); line-height: 1.35; }
.drop-panel a span { display: block; font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.drop-panel a.plain { font-size: 14px; font-weight: 500; color: var(--ink-2); padding: 7.5px 12px; }
.drop-panel a.plain:hover { color: var(--ink-1); }
.drop-panel a.plain.on, .drop-panel a.on b { color: var(--primary); }
.drop-sep { height: 1px; background: var(--line-2); margin: 8px 4px; }

/* ============ Megamenú de funcionalidades (dos columnas) ============ */
.mega-panel {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  background: var(--bg-panel); border: 1px solid var(--line-1);
  border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
  padding: 10px; width: 1040px; max-width: calc(100vw - 32px); isolation: isolate;
}
.mega-panel .mega-col + .mega-col { border-left: 1px solid var(--line-2); }
.mega-col .mega-h.sub { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.mega-col { display: flex; flex-direction: column; gap: 1px; padding: 4px; }
.mega-h {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-cap); padding: 6px 10px 8px;
}
.mega-col > a {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; border-radius: var(--r-md); text-decoration: none;
  transition: background .14s var(--ease);
}
.mega-col > a:hover { background: var(--bg-subtle); }
.mega-col .mi {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  background: var(--bg-subtle); display: grid; place-items: center;
}
.mega-col .mi svg {
  width: 18px; height: 18px; color: var(--ink-2);
  stroke: var(--ink-2); stroke-width: 1.7; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.mega-col .mt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mega-col .mt b { font-size: 14px; font-weight: 600; color: var(--ink-1); line-height: 1.3; }
.mega-col .ms { font-size: 12px; color: var(--ink-2); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega-col > a.on { background: var(--bg-subtle); }
.mega-col > a.on .mt b { color: var(--primary); }
.mega-col > a.on .mi svg { color: var(--primary); stroke: var(--primary); }

/* Columna derecha: módulos extra + SofIA, más destacada (neutro, sin arena) */
/* La caja gris envuelve solo los módulos + «ver todos»; deja hueco debajo para el CTA */
.mega-extras-box {
  flex: 1;
  background: var(--bg-subtle);
  border: 1px solid var(--line-1); border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 1px; padding: 4px;
}
.mega-extras-box > a {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; border-radius: var(--r-md); text-decoration: none;
  transition: background .14s var(--ease);
}
.mega-extras .mi { background: var(--bg-panel); }
.mega-extras-box > a:hover { background: rgba(255, 255, 255, .7); }
/* CTA al fondo de la caja (a la altura de SofIA): enlace en mayúsculas como los
   títulos de columna, azul; sin fondo al pasar el ratón (es un enlace, no botón). */
.mega-cta {
  margin-top: auto;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--primary); padding: 8px 10px 10px;
  transition: color .14s var(--ease);
}
.mega-extras-box > a.mega-cta:hover { background: transparent; }
.mega-cta:hover { color: var(--primary-hover); }
.mega-col .mp {
  flex: none; margin-left: auto; align-self: center;
  font-size: 12px; font-weight: 700; color: var(--primary);
  background: rgba(37,99,235,.11); border-radius: var(--r-pill);
  padding: 3px 9px; white-space: nowrap;
}
.mega-sofia {
  background: var(--bg-panel); border: 1px solid rgba(91,33,182,.16);
  box-shadow: 0 1px 4px rgba(24,20,10,.06); margin-top: 5px;
}
.mega-extras > a.mega-sofia:hover { background: var(--bg-panel); border-color: rgba(91,33,182,.32); }
.mega-sofia .mi { background: var(--violet-bg); }
.mega-sofia .mi svg { color: var(--violet-ink); stroke: var(--violet-ink); }
.mega-col > a.mega-sofia .mt b { color: var(--violet-ink); }
.mega-col > a.mega-sofia .mi svg { color: var(--violet-ink); stroke: var(--violet-ink); }
.mp-ia { color: var(--violet-ink); background: var(--violet-bg); }
/* SofIA en el megamenú: 3 pills con sus tres roles (ventas · asistente · gestión) */
.mega-col .mt .sofia-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.mega-col .mt .sofia-tags span {
  font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: .01em;
  color: var(--violet-ink); background: var(--violet-bg);
  border-radius: var(--r-pill); padding: 3px 8px; white-space: nowrap;
}
.mega-all {
  margin-top: 3px; padding: 9px 10px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.mega-all:hover { color: var(--ink-1); }

/* ============ Nav: menú móvil ============ */
.nav-burger {
  display: none; width: 40px; height: 40px; margin-left: 2px;
  border: none; background: transparent; cursor: pointer; border-radius: var(--r-sm);
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-burger span { display: block; width: 18px; height: 2px; background: var(--ink-1); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }
nav.open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.open .nav-burger span:nth-child(2) { opacity: 0; }
nav.open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-mobile { display: none; }
@media (max-width: 900px) {
  .nav-burger { display: flex; }
  .nav-mobile {
    display: block; position: absolute; top: 100%; left: 0; right: 0; z-index: 60; isolation: isolate;
    background: var(--bg-app); border-bottom: 1px solid var(--line-1); box-shadow: var(--shadow-pop);
    padding: 4px 24px 20px; max-height: calc(100dvh - 66px); overflow: auto;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
  }
  nav.open .nav-mobile { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
.nm-group { padding: 14px 0 8px; border-bottom: 1px solid var(--line-2); }
.nm-group b { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.nm-group a, .nm-links a { display: block; padding: 8px 0; font-size: 16px; font-weight: 500; color: var(--ink-1); text-decoration: none; }
.nm-group a.on, .nm-links a.on { color: var(--primary); font-weight: 600; }
.nm-links { padding: 10px 0 4px; border-bottom: 1px solid var(--line-2); }
.nm-ctas { display: flex; gap: 10px; padding-top: 18px; }
.nm-ctas .btn { flex: 1; justify-content: center; }
/* Menú móvil: "Funcionalidades" plegable como texto plano (con Módulos extra dentro) */
/* Anula el estilo global de details/summary (tarjeta de las FAQ) para que sea texto plano */
.nm-acc { background: none; border: 0; border-radius: 0; margin: 0; overflow: visible; }
.nm-acc > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  list-style: none; cursor: pointer; padding: 8px 0;
  font-size: 16px; font-weight: 500; color: var(--ink-1);
  -webkit-tap-highlight-color: transparent;
}
.nm-acc > summary::-webkit-details-marker { display: none; }
.nm-acc > summary::after {
  content: ''; flex: none; width: 7px; height: 7px; margin-right: 4px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.nm-acc[open] > summary { color: var(--primary); font-weight: 600; }
.nm-acc[open] > summary::after { transform: rotate(-135deg); border-color: var(--primary); }
.nm-acc-body { margin: 2px 0 6px; padding-left: 14px; border-left: 2px solid var(--line-2); }
.nm-acc-body a { display: block; padding: 7px 0; font-size: 15px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.nm-acc-body a.on { color: var(--primary); font-weight: 600; }
.nm-acc-sub > summary { font-size: 15px; font-weight: 500; color: var(--ink-2); }
.nm-acc-sub[open] > summary { color: var(--primary); }
/* Selector de idioma en el menú móvil, estilo footer (globo + texto pequeño y claro) */
.nm-lang { display: flex; align-items: center; gap: 12px; padding: 16px 0 4px; font-size: 13.5px; }
.nm-lang svg { width: 16px; height: 16px; flex: none; stroke: var(--ink-cap); stroke-width: 1.4; fill: none; }
.nm-lang .on { font-weight: 600; color: var(--ink-1); }
.nm-lang a { text-decoration: none; color: var(--ink-cap); }
.nm-lang a:hover { color: var(--ink-1); }
@keyframes nmReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.nm-acc[open] > .nm-acc-body { animation: nmReveal .18s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  .nav-drop, .nav-mobile, .has-menu .chev, .nav-burger span { transition: none !important; }
  .nm-acc > summary::after { transition: none; }
  .nm-acc[open] > .nm-acc-body { animation: none; }
}

/* ============ Footer: legal ============ */
.foot-legal { display: flex; gap: 14px 18px; flex-wrap: wrap; }

/* ============ Capturas reales de la app ============ */
.browser .shot { display: block; width: 100%; height: auto; }
.shot-caption { text-align: center; font-size: 12.5px; color: var(--ink-2); margin-top: 14px; }

/* ── Escena "flujo": recorrido animado Inicio → Evento → Tarea (capturas reales) ── */
.fxflow-view { position: relative; aspect-ratio: 2880 / 1800; overflow: hidden; background: var(--bg-app); }
.fxflow-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; transition: opacity .5s var(--ease); }
.fxflow-shot.show { opacity: 1; }
.fxflow-step { position: absolute; top: 3.2%; left: 3%; z-index: 6; background: rgba(17,17,17,.85); color: #fff;
  font-size: clamp(10px, 1.1vw, 13px); font-weight: 600; padding: 5px 13px; border-radius: var(--r-pill);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transform: translateY(-6px); transition: opacity .35s var(--ease), transform .35s var(--ease); white-space: nowrap; }
.fxflow-step.show { opacity: 1; transform: none; }
.fxflow-cursor { position: absolute; left: 50%; top: 60%; width: clamp(16px, 1.7vw, 22px); height: clamp(16px, 1.7vw, 22px); z-index: 8; pointer-events: none;
  transition: left .75s var(--ease), top .75s var(--ease); filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.fxflow-cursor svg { width: 100%; height: 100%; display: block; }
.fxflow-cursor.tap { transform: scale(.82); }
.fxflow-ripple { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: rgba(37,99,235,.35); z-index: 7;
  transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; }
.fxflow-ripple.go { animation: fxflowRipple .55s var(--ease); }
@keyframes fxflowRipple { 0% { transform: translate(-50%,-50%) scale(.2); opacity: .6; } 100% { transform: translate(-50%,-50%) scale(2.4); opacity: 0; } }
.fxflow-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 84%; max-width: 880px; z-index: 9;
  background: var(--bg-panel); box-shadow: -24px 0 60px -26px rgba(18,18,24,.45); overflow: hidden;
  display: flex; flex-direction: column;
  transform: translateX(101%); transition: transform .6s var(--ease); }
.fxflow-drawer.show { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fxflow-shot, .fxflow-cursor, .fxflow-step, .fxflow-drawer { transition: none !important; }
  .fxflow-ripple { display: none; }
}
/* Hotspot: la primera tarjeta del tablero, a la espera del clic del visitante.
   Sustituye al cursor que antes recorría la app en bucle. */
.fxflow-hot { position: absolute; left: 21.6%; top: 30%; width: 25%; height: 20.5%; z-index: 7;
  border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; border-radius: 14px;
  transition: opacity .3s var(--ease), transform .3s var(--ease); }
.fxflow-hot.gone { opacity: 0; transform: scale(.98); pointer-events: none; }
.fxflow-hot-ring { position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--primary);
  box-shadow: 0 0 0 0 rgba(37,99,235,.4); animation: fxflowHot 2s var(--ease) infinite; }
.fxflow-hot-tip { position: absolute; left: 50%; top: -12px; transform: translate(-50%, -100%);
  background: var(--primary); color: #fff; white-space: nowrap; font-weight: 700;
  font-size: clamp(10px, 1.05vw, 12.5px); padding: 5px 12px; border-radius: var(--r-pill);
  box-shadow: 0 6px 18px -6px rgba(37,99,235,.6); }
.fxflow-hot-tip::after { content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--primary); border-bottom: 0; }
.fxflow-hot:hover .fxflow-hot-ring { box-shadow: 0 0 0 6px rgba(37,99,235,.16); animation-play-state: paused; }
@keyframes fxflowHot {
  0% { box-shadow: 0 0 0 0 rgba(37,99,235,.4); }
  70% { box-shadow: 0 0 0 11px rgba(37,99,235,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
}
@media (prefers-reduced-motion: reduce) { .fxflow-hot-ring { animation: none; } }
/* Panel de detalle de tarea (fiel al task-drawer real de la app) */
.fxtask { color: var(--ink-1); display: flex; flex-direction: column; height: 100%; min-height: 0; }
.fxtask-body { flex: 1 1 auto; display: flex; min-height: 0; }
.fxtask-main { flex: 1 1 auto; overflow-y: auto; min-width: 0; }
.fxtask-chat { flex: none; width: 42%; max-width: 322px; border-left: 1px solid var(--line-2); display: flex; flex-direction: column; min-height: 0; }
.fxtask-chat-head { flex: none; padding: 12px 16px; border-bottom: 1px solid var(--line-2); font-size: 11.5px; font-weight: 700; color: var(--ink-2); letter-spacing: .03em; }
.fxtask-chat .chat { flex: 1 1 auto; overflow-y: auto; }
.fxtask-chat .chat-input { flex: none; }
.fxtask-topbar { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line-2); background: var(--bg-panel); }
.fxtask-topbar .dw-x { margin-left: auto; width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--line-1); display: grid; place-items: center; color: var(--ink-3); font-size: 11px; }
.fxtask-tabs { display: flex; gap: 2px; padding: 0 14px; border-bottom: 1px solid var(--line-2); }
.fxtask-tab { font-size: 12px; font-weight: 600; color: var(--ink-3); padding: 9px 10px; border-bottom: 2px solid transparent; white-space: nowrap; }
.fxtask-tab.on { color: var(--ink-1); border-bottom-color: var(--primary); }
.fxtask-title { font-size: clamp(15px, 1.7vw, 18px); font-weight: 700; padding: 14px 18px 2px; line-height: 1.25; }
.fxtask-fields { padding: 8px 18px 4px; display: grid; grid-template-columns: 84px 1fr; gap: 8px 12px; align-items: center; }
.fxtask-fields .fl { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.fxtask-fields .fv { font-size: 12.5px; display: flex; align-items: center; gap: 6px; font-weight: 500; }
.fxtask-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.fxtask-sec { padding: 13px 18px; border-top: 1px solid var(--line-2); }
.fxtask-sec .sl { font-size: 10px; font-weight: 700; color: var(--ink-4); letter-spacing: .05em; margin-bottom: 9px; text-transform: uppercase; }
.fxtask-desc { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.fxtask-parts { display: flex; flex-direction: column; gap: 8px; }
.fxtask-part { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-2); }
.fxtask-cl { display: flex; flex-direction: column; gap: 9px; }
.fxtask-cli { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-2); }
.fxtask-cli .box { width: 15px; height: 15px; border-radius: 4.5px; border: 1.5px solid var(--line-strong); flex: none; }
.fxtask-cli.done .box { background: var(--success); border-color: var(--success); position: relative; }
.fxtask-cli.done .box::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 9px; font-weight: 800; }
.fxtask-cli.done .t { text-decoration: line-through; color: var(--ink-4); }
.fxtask-cli .cmeta { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--ink-4); white-space: nowrap; }

/* ============ Responsive ============ */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-inner { padding: 0 24px; }
  .feature, .tab-panel.on { grid-template-columns: 1fr; }
  .roles-box { display: block; border-radius: 20px; }
  .roles-box .tab-panel.on { display: grid; grid-template-columns: 1fr; }
  .roles-box .role-copy, .roles-box .role-shot { grid-area: auto; }
  .seg-tabs .tab-btn { padding: 8px 12px; font-size: 14px; gap: 6px; justify-content: center; }
  .seg-tabs .tab-btn svg { width: 15px; height: 15px; }
  .role-shot { height: auto; max-height: 420px; aspect-ratio: 4 / 3; }
  .role-shot.shot-planner { aspect-ratio: auto; max-height: none; }
  .feature.flip .f-copy { order: 1; }
  .feature.flip .f-visual { order: 2; }
  .mock-side { display: none; }
  .app-mock { grid-template-columns: 1fr; }
  .stages { grid-template-columns: 1fr; }
  .modules { grid-template-columns: 1fr; }
  section { padding: 64px 0; }
  .hero { padding-top: 56px; }
}
@media (max-width: 560px) {
  .nav-actions .entrar, .nav-actions .lang-select { display: none; }
  .nav-actions .btn { padding: 8px 14px; font-size: 14px; }
  .fin-kpis { grid-template-columns: 1fr 1fr; }
  .seg-tabs .tab-btn { font-size: 13.5px; padding: 9px 6px; }
  .seg-tabs .tab-btn svg { display: none; }
}

/* Módulos enlazados */
a.module { text-decoration: none; color: inherit; }
a.module:hover b { color: var(--primary); }

/* ============================================================
   CAPA DE MOTION DE FIRMA (14 jul) — todo respeta reduced-motion
   ============================================================ */

/* Mensajes de WhatsApp coreografiados por site.js (.show) */
.js .wa-msg.show { opacity: 1; transform: none; }
.wa-typing {
  align-self: flex-end;
  background: #DCF8C6;
  border-radius: 10px;
  border-top-right-radius: 2px;
  padding: 10px 14px;
  display: inline-flex;
  gap: 4px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  box-shadow: 0 1px 1px rgba(0,0,0,.08);
}
.wa-typing.show { opacity: 1; transform: none; }
.wa-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(0,0,0,.35);
  animation: wa-dot 1.1s infinite ease-in-out;
}
.wa-typing span:nth-child(2) { animation-delay: .18s; }
.wa-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes wa-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* El workspace del hero se monta solo */
.js .hero-shot .task-card {
  opacity: 0; transform: translateY(12px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.js .hero-shot.in .task-card { opacity: 1; transform: none; }
.js .hero-shot.in .stage-col:nth-child(1) .task-card:nth-of-type(2) { transition-delay: .25s; }
.js .hero-shot.in .stage-col:nth-child(2) .task-card:nth-of-type(2) { transition-delay: .4s; }
.js .hero-shot.in .stage-col:nth-child(3) .task-card:nth-of-type(2) { transition-delay: .55s; }
.js .hero-shot.in .stage-col:nth-child(1) .task-card:nth-of-type(3) { transition-delay: .7s; }
.js .hero-shot.in .stage-col:nth-child(2) .task-card:nth-of-type(3) { transition-delay: .85s; }
.js .hero-shot.in .stage-col:nth-child(3) .task-card:nth-of-type(3) { transition-delay: 1s; }
.js .hero-shot .progress i { width: 0; transition: width 1.1s var(--ease) .5s; }
.js .hero-shot.in .progress i { width: 68%; }
.js .hero-shot .event-head .av {
  transform: scale(0);
  transition: transform .4s var(--ease);
}
.js .hero-shot.in .event-head .av { transform: scale(1); }
.js .hero-shot.in .event-head .av:nth-child(2) { transition-delay: .5s; }
.js .hero-shot.in .event-head .av:nth-child(3) { transition-delay: .6s; }
.js .hero-shot.in .event-head .av:nth-child(4) { transition-delay: .7s; }

/* Los visuales de features entran con un pelín de retardo (ritmo, no reflejo) */
.js .feature .f-visual.reveal { transition-delay: .12s; }

/* Micro-interacciones de botones */
.btn:active { transform: translateY(0) scale(.98); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }

/* CTA intermedia de conversión */
.cta-mid {
  --mx: 50%; --my: 50%;
  position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  background: var(--bg-panel); border: 1px solid var(--line-1);
  border-radius: var(--r-xl); box-shadow: var(--shadow-2);
  padding: 24px 30px;
}
/* Halo que sigue al puntero, igual que en el resto de bloques (JS pone --mx/--my). */
.cta-mid::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx) var(--my), rgba(37, 99, 235, .10), transparent 70%);
  opacity: 0; transition: opacity .35s ease;
}
.cta-mid.is-lit::after { opacity: 1; }
.cta-mid > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .cta-mid::after { transition: none; } }
.cta-mid b { font-size: 17px; display: block; margin-bottom: 3px; }
.cta-mid span { font-size: 14px; color: var(--ink-cap); }
.cta-mid .btn { flex: none; }
/* Variante con dos acciones (primaria + Google) y copy a la izquierda: llena la
   franja sin que quede aire muerto. Reutilizable en cualquier página. */
.cta-mid-split { gap: 26px; padding-right: 20px; }
.cta-mid-split .cta-mid-copy { flex: 1 1 340px; }
.cta-mid-split .cta-mid-copy span { max-width: 56ch; }
.cta-mid-split .cta-mid-actions { flex: none; display: flex; align-items: center; gap: 12px; }
.cta-mid-split .cta-mid-actions .btn { justify-content: center; }
@media (max-width: 620px) {
  .cta-mid-split { padding-right: 24px; }
  .cta-mid-split .cta-mid-actions { width: 100%; }
  .cta-mid-split .cta-mid-actions .btn { flex: 1 1 auto; }
}
/* Acento violeta de SofIA para la franja intermedia. Reutilizable en cualquier página. */
.cta-mid.cta-mid-violet { background: linear-gradient(92deg, var(--violet-bg), var(--bg-panel) 60%); border-color: rgba(124, 58, 237, .18); }

/* Franja fotográfica emocional */
.photo-band { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-pop); }
.photo-band img { width: 100%; height: clamp(300px, 42vw, 440px); object-fit: cover; display: block; }
.photo-caption { text-align: center; font-size: 14px; color: var(--ink-cap); margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  .js .hero-shot .task-card { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .hero-shot .progress i { width: 68% !important; transition: none !important; }
  .js .hero-shot .event-head .av { transform: scale(1) !important; transition: none !important; }
  .wa-typing { display: none !important; }
  .js .wa-msg { opacity: 1 !important; transform: none !important; }
}

/* ── Top bar de anuncio (encima del nav, todas las páginas) ── */
.topbar { background: var(--ink-1); }
.tb-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px 0; }
.topbar a { color: #fff; text-decoration: none; font-size: 13px; }
.tb-promo { font-weight: 600; }
.tb-promo:hover { text-decoration: underline; }
.tb-tel { opacity: .85; white-space: nowrap; }
.tb-tel:hover { opacity: 1; }
@media (max-width: 700px) {
  .tb-tel { display: none; }
  .tb-inner { justify-content: center; text-align: center; }
}

/* ── Banda de cifras (home) ── */
.stats-band { padding: 0; background: var(--bg-panel); border-top: 1px solid var(--line-1); border-bottom: 1px solid var(--line-1); }
.stats-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: clamp(52px, 6vw, 76px) 0; }
.stats-band .stat { text-align: center; padding: 4px clamp(16px, 3vw, 44px); position: relative; }
.stats-band .stat + .stat::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 62px; width: 1px; background: var(--line-2);
}
.stats-band .stat b {
  display: block; font-size: clamp(2.6rem, 4.6vw, 3.5rem); font-weight: 700;
  letter-spacing: -0.035em; line-height: 1; color: var(--primary);
  font-variant-numeric: tabular-nums; margin-bottom: 14px;
}
.stats-band .stat span { display: block; font-size: 14px; line-height: 1.5; color: var(--ink-2); max-width: 26ch; margin: 0 auto; }
@media (max-width: 700px) {
  .stats-inner { grid-template-columns: 1fr; gap: 0; padding: 40px 0; }
  .stats-band .stat { padding: 26px 12px; }
  .stats-band .stat + .stat::before { left: 50%; top: 0; transform: translateX(-50%); width: 72px; height: 1px; }
}

/* ── Cifras + foto (home): retrato de la planner junto a las cifras de prueba ── */
.figures-band { background: var(--bg-panel); border-top: 1px solid var(--line-1); border-bottom: 1px solid var(--line-1); }
.fb-inner { padding: clamp(48px, 6vw, 84px) 0; }
.fb-photo { margin: 0 0 clamp(30px, 4vw, 52px); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-pop); }
.fb-photo img { width: 100%; height: clamp(240px, 30vw, 400px); object-fit: cover; display: block; }
.fb-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 40px); max-width: 900px; margin: 0 auto; }
.fb-stats .stat {
  position: relative; text-align: center; padding: 16px clamp(12px, 2.4vw, 26px);
  border-radius: var(--r-lg);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), background-color .28s var(--ease);
}
.fb-stats .stat:hover {
  transform: translateY(-5px); background-color: var(--bg-panel);
  box-shadow: 0 20px 44px -22px rgba(18, 18, 24, .32), 0 2px 8px rgba(18, 18, 24, .06);
}
.fb-stats .stat:hover::before { opacity: 0; }
.fb-stats .stat:hover b { color: var(--primary); }
.fb-stats .stat + .stat::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 60%; background: var(--line-2);
}
.fb-stats .stat b { display: block; font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 700; color: var(--ink-1); letter-spacing: -0.03em; line-height: 1; transition: color .28s var(--ease); }
.fb-stats .stat span { display: block; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); margin: 10px auto 0; max-width: 22ch; }
@media (max-width: 760px) {
  .fb-inner { padding: 44px 0; }
  .fb-photo { margin-bottom: 26px; }
  .fb-photo img { height: clamp(220px, 54vw, 300px); }
  .fb-stats { grid-template-columns: 1fr; gap: 0; max-width: 380px; }
  .fb-stats .stat { padding: 22px 0; }
  .fb-stats .stat + .stat::before { left: 50%; top: 0; transform: translateX(-50%); width: 64px; height: 1px; }
}

/* ── Tarjeta de evento (calcada de la vista Eventos de la app) ── */
.event-card { padding: 22px 22px 20px; }
.event-card .ec-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.event-card .ec-avs { display: flex; flex: none; }
.event-card .ec-avs .av + .av { margin-left: -9px; box-shadow: 0 0 0 2px var(--bg-panel); }
.event-card .ec-name b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin-top: 2px; }
.event-card .ec-dots { margin-left: auto; color: var(--ink-4); letter-spacing: 2px; font-weight: 700; }
.event-card .ec-progress { padding-bottom: 16px; border-bottom: 1px solid var(--line-2); margin-bottom: 16px; }
.event-card .ec-progress .row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.event-card .ec-progress .pct { font-weight: 700; font-size: 15px; }
.event-card .ec-bar { height: 5px; border-radius: 999px; background: var(--bg-subtle); overflow: hidden; }
.event-card .ec-bar i { display: block; height: 100%; background: var(--ink-1); border-radius: 999px; }
.event-card .ec-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 16px 18px; }
.event-card .ec-field .v { font-size: 13.5px; font-weight: 600; margin-top: 5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.event-card .ec-field .v .av { width: 20px; height: 20px; font-size: 9px; }

/* ── Tarjeta de tarea kanban (calcada de la vista Tareas de la app) ── */
.task-card { padding: 14px 16px 10px; border-left: 3px solid var(--av-coral); }
.task-card .tc-ev { font-size: 11.5px; color: var(--ink-3); display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.task-card .tc-ev .av { width: 20px; height: 20px; font-size: 9px; }
.task-card .tc-title { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.task-card .tc-pills { display: flex; gap: 6px; margin-bottom: 8px; }
.task-card .tc-meta { font-size: 12px; color: var(--ink-3); display: flex; gap: 12px; align-items: center; }
.task-card .tc-meta .hot { color: var(--danger-ink); font-weight: 600; }
.task-card .tc-foot { border-top: 1px solid var(--line-2); margin-top: 10px; padding-top: 8px; font-size: 11px; color: var(--ink-4); display: flex; gap: 12px; }

/* ── Escena de drawer (el panel lateral de la app, abierto sobre el tablero) ── */
.drawer-scene { position: relative; max-width: 620px; margin: 0 auto; padding-top: 20px; }
.drawer-scene .ds-bg { position: absolute; top: 0; left: 0; width: 300px; opacity: .55; transform: scale(.95); transform-origin: top left; }
.drawer-scene .app-drawer { position: relative; margin-left: 70px; box-shadow: var(--shadow-pop); transform-origin: top left; }
/* La tarea del tablero se abre en su hub: primero aparece la tarjeta (como en el
   propio tablero) y, un instante después, el hub CRECE desde su esquina hasta ocupar
   el panel. Así se entiende que uno sale del otro y no es un recorte de pantalla. */
.js .f-visual.reveal .drawer-scene .ds-bg { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .f-visual.reveal:not(.in) .drawer-scene .ds-bg { opacity: 0; transform: translate(10px, 14px) scale(.9); }
.js .f-visual.reveal .drawer-scene .app-drawer { transition: opacity .55s var(--ease), transform .6s var(--ease); }
.js .f-visual.reveal:not(.in) .drawer-scene .app-drawer { opacity: 0; transform: translate(-58px, -12px) scale(.5); }
.js .f-visual.reveal.in .drawer-scene .app-drawer { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .js .f-visual.reveal .drawer-scene .ds-bg { transition: none !important; opacity: .55 !important; transform: scale(.95) !important; }
  .js .f-visual.reveal .drawer-scene .app-drawer { transition: none !important; opacity: 1 !important; transform: none !important; }
}
.app-drawer .dw-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line-2); }
.app-drawer .dw-x { margin-left: auto; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line-1); display: grid; place-items: center; color: var(--ink-3); font-size: 11px; }
@media (max-width: 700px) {
  .drawer-scene .ds-bg { display: none; }
  .drawer-scene .app-drawer { margin-left: 0; }
}

/* ── Selector de idioma (caja con desplegable, como la web actual) ── */
.lang-select { position: relative; }
.lang-select > button {
  font-family: var(--font); font-size: 11.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-2); cursor: pointer;
  background: var(--bg-panel); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 8px 12px; display: inline-flex; align-items: center; gap: 7px;
}
.lang-select > button:hover { color: var(--ink-1); background: var(--bg-hover); }
.lang-select .chev { width: 10px; height: 10px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.lang-select .ls-drop {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 132px;
  background: var(--bg-panel); border: 1px solid var(--line-1); border-radius: var(--r-md);
  box-shadow: var(--shadow-pop); padding: 6px; display: none;
}
.lang-select:hover .ls-drop, .lang-select:focus-within .ls-drop { display: block; }
.ls-drop a, .ls-drop span { display: block; padding: 8px 10px; border-radius: var(--r-sm); font-size: 13.5px; color: var(--ink-1); text-decoration: none; }
.ls-drop a:hover { background: var(--bg-hover); }
.ls-drop .on { font-weight: 700; color: var(--ink-3); }

/* ── Prueba social (interiores): cifras reales + garantía ── */
.proof { background: var(--bg-panel); border-top: 1px solid var(--line-1); border-bottom: 1px solid var(--line-1); }
.proof-inner { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.proof-copy h2 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); margin-bottom: 8px; }
.proof-copy p { color: var(--ink-2); max-width: 58ch; }
.proof-note { margin-top: 12px; font-size: 14px; color: var(--ink-cap); }
/* Las cifras viven en un panel con la piel del producto: filas de dato, número
   tabular a la izquierda y separadores finos, como un widget de resumen de la app. */
.proof-stats {
  --mx: 50%; --my: 50%;
  position: relative; isolation: isolate;
  display: grid; gap: 0;
  background: var(--bg-app); border: 1px solid var(--line-1);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  padding: 2px 24px;
  transition: box-shadow .3s var(--ease);
}
.proof-stats:hover { box-shadow: var(--shadow-pop); }
/* efecto tarjeta con halo que sigue al puntero (--mx/--my los mueve site.js) */
.proof-stats::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(300px circle at var(--mx) var(--my), rgba(37, 99, 235, .09), transparent 70%);
  opacity: 0; transition: opacity .4s ease;
}
.proof-stats.is-lit::after { opacity: 1; }
.proof-stats .stat {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: auto minmax(64px, auto) 1fr;
  align-items: center; gap: 18px; text-align: left; padding: 20px 0;
}
/* subgrid: la columna del número mide igual en las 3 filas, así los textos
   de la derecha empiezan todos en la misma línea */
@supports (grid-template-columns: subgrid) {
  .proof-stats { grid-template-columns: auto auto 1fr; column-gap: 18px; }
  .proof-stats .stat { grid-column: 1 / -1; grid-template-columns: subgrid; }
}
.proof-stats .stat + .stat { border-top: 1px solid var(--line-2); }
.proof-stats .stat-ic {
  width: 42px; height: 42px; border-radius: var(--r-md); flex: none;
  background: rgba(37, 99, 235, .08); color: var(--primary);
  display: grid; place-items: center;
}
.proof-stats .stat-ic svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.proof-stats .stat b {
  color: var(--primary); font-size: clamp(28px, 3.2vw, 38px); line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.proof-stats .stat span { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 480px) {
  .proof-stats .stat { grid-template-columns: auto 1fr; gap: 14px; }
  .proof-stats .stat b { grid-column: 2; }
  .proof-stats .stat span { grid-column: 1 / 3; }
}
@media (max-width: 700px) {
  .proof-inner { grid-template-columns: 1fr; }
  .proof-stats { padding: 2px 20px; }
}

/* ── Para proveedores: la invitación real de una planner, con la piel de la app ── */
.invite { max-width: 430px; margin: 0 auto; overflow: hidden; }
.invite-top { padding: 18px 18px 16px; display: flex; gap: 12px; align-items: flex-start; }
.invite-logo {
  width: 44px; height: 44px; border-radius: var(--r-md); flex: none;
  background: var(--violet-bg); color: var(--violet-ink);
  display: grid; place-items: center; font-size: 17px; font-weight: 700;
}
.invite-msg { min-width: 0; }
.invite-msg .who { display: flex; align-items: baseline; gap: 7px; }
.invite-msg .who b { font-size: 13.5px; }
.invite-msg .who .t { font-size: 11px; color: var(--ink-3); }
.invite-msg p { font-size: 14px; line-height: 1.5; color: var(--ink-2); margin: 5px 0 0; }
.invite-msg .ev { color: var(--ink-1); font-weight: 600; }
.invite-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 0 18px 18px; }
.invite-cta .btn { padding: 9px 20px; font-size: 13.5px; flex: none; cursor: pointer; user-select: none; transition: background .2s var(--ease); }
.invite-cta .btn.is-done { background: var(--success-ink); border-color: var(--success-ink); }
.invite-cta .free { font-size: 12.5px; color: var(--ink-2); }
.invite-mine {
  border-top: 1px solid var(--line-2); background: var(--bg-app);
  padding: 13px 18px 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.invite-mine .lbl { font-size: 11.5px; color: var(--ink-cap); width: 100%; margin-bottom: 2px; }
.invite-mine .chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--ink-2); background: var(--bg-panel);
  border: 1px solid var(--line-1); border-radius: var(--r-pill); padding: 4px 11px;
}
.invite-mine .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); flex: none; }

/* ── Conexiones: grid de tarjetas de integraciones ── */
.int-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 1010px; margin: 0 auto; }
.int-card {
  width: 150px; padding: 26px 14px 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 14px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2); text-align: center;
}
.int-card img { height: 32px; width: auto; max-width: 100px; object-fit: contain; }
.int-card img.wide { height: 22px; }
@media (max-width: 560px) {
  .int-grid .int-card { width: calc(50% - 7px); }
}

/* ── Conexiones: carrusel de logos en dos filas ── */
.int-marquee { position: relative; overflow: hidden; }
.int-marquee::before, .int-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 11%; z-index: 2; pointer-events: none;
}
.int-marquee::before { left: 0; background: linear-gradient(90deg, var(--bg-panel), transparent); }
.int-marquee::after { right: 0; background: linear-gradient(270deg, var(--bg-panel), transparent); }
.int-row { display: flex; width: max-content; }
.int-row + .int-row { margin-top: 14px; }
.int-row.r1 { animation: int-scroll 68s linear infinite; }
.int-row.r2 { animation: int-scroll 84s linear infinite reverse; }
.int-marquee:hover .int-row { animation-play-state: paused; }
.int-marquee .int-card { flex: none; margin-right: 14px; width: 146px; padding: 22px 14px 18px; gap: 13px; font-size: 13px; }
.int-marquee .int-card img { height: 30px; }
.int-marquee .int-card img.wide { height: 20px; }
@keyframes int-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 560px) {
  .int-marquee .int-card { width: 128px; padding: 18px 10px 14px; margin-right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .int-row { animation: none; }
  .int-marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .int-marquee::before, .int-marquee::after { display: none; }
}
.int-more { text-align: center; margin-top: 26px; font-size: 14.5px; color: var(--ink-2); }
.int-more a { color: var(--primary); font-weight: 600; text-decoration: none; }
.int-more a:hover { text-decoration: underline; }

/* ============ Páginas legales ============ */
.legal { max-width: 740px; margin: 0 auto; }
.legal h2 { font-size: 1.3rem; font-weight: 700; margin: 46px 0 14px; scroll-margin-top: 90px; }
.legal p { font-size: 15.5px; color: var(--ink-2); margin-bottom: 12px; }
.legal ul { margin: 0 0 14px 22px; }
.legal li { font-size: 15.5px; color: var(--ink-2); margin-bottom: 7px; }
.legal li::marker { color: var(--ink-4); }
.legal a { color: var(--primary); text-decoration: none; }
.legal a:hover { text-decoration: underline; }
.legal strong, .legal b { color: var(--ink-1); font-weight: 600; }
.legal table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 18px 0; }
.legal th, .legal td { border: 1px solid var(--line-1); padding: 10px 14px; text-align: left; color: var(--ink-2); vertical-align: top; }
.legal th { background: var(--bg-subtle); color: var(--ink-1); font-weight: 600; }
.legal-updated { font-size: 13.5px; color: var(--ink-3); margin-bottom: 36px; }
.legal-toc {
  background: var(--bg-panel); border: 1px solid var(--line-1); border-radius: var(--r-lg);
  padding: 20px 26px; margin-bottom: 44px;
}
.legal-toc b { display: block; font-size: 13.5px; margin-bottom: 10px; }
.legal-toc ol { columns: 2; column-gap: 32px; margin: 0 0 0 20px; }
.legal-toc li { font-size: 14px; margin-bottom: 6px; break-inside: avoid; }
.legal-toc a { color: var(--ink-2); }
.legal-toc a:hover { color: var(--primary); text-decoration: none; }
.legal-divider { height: 1px; background: var(--line-strong); margin: 64px 0; }
.legal-related { border-top: 1px solid var(--line-2); margin-top: 56px; padding-top: 22px; font-size: 14px; display: flex; gap: 8px 20px; flex-wrap: wrap; align-items: baseline; }
.legal-related span { color: var(--ink-3); }
.legal-related a { color: var(--ink-2); }
.legal-related a:hover { color: var(--primary); }
@media (max-width: 640px) {
  .legal-toc ol { columns: 1; }
  .legal table { display: block; overflow-x: auto; }
}

/* ============ Aviso de idioma (popup centrado, tipo Holded) ============ */
/* z: nav 50 · dropdowns 60 · fondo del aviso 69 · aviso 70 */
.lang-backdrop {
  position: fixed; inset: 0; z-index: 69;
  background: rgba(26, 26, 26, .42);
  opacity: 0; transition: opacity .3s var(--ease);
}
.lang-backdrop.show { opacity: 1; }
.lang-banner {
  position: fixed; left: 50%; top: 50%; z-index: 70;
  width: min(440px, calc(100vw - 32px));
  background: var(--bg-panel);
  border: 1px solid var(--line-1); border-radius: var(--r-xl);
  box-shadow: var(--shadow-pop); padding: 28px 28px 24px;
  text-align: center;
  opacity: 0; transform: translate(-50%, -50%) translateY(12px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.lang-banner.show { opacity: 1; transform: translate(-50%, -50%); }
.lang-banner .lb-globe {
  width: 42px; height: 42px; margin: 0 auto 12px; border-radius: 50%;
  background: var(--info-bg); color: var(--info-ink);
  display: grid; place-items: center;
}
.lang-banner .lb-globe svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; }
.lang-banner h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 10px; }
.lang-banner .lb-q { font-size: 16px; font-weight: 700; color: var(--ink-1); margin-bottom: 6px; }
.lang-banner p { font-size: 15px; color: var(--ink-2); margin-bottom: 18px; text-wrap: pretty; }
.lang-banner .lb-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.lang-banner .lb-actions .btn { padding: 10px 20px; font-size: 14.5px; }
@media (prefers-reduced-motion: reduce) {
  .lang-banner, .lang-backdrop { transition: none; }
}

/* ============ Demo interactiva (capturas navegables por módulos) ============ */
.ad-tabs {
  display: flex; gap: 4px; padding: 10px 14px; flex-wrap: wrap;
  background: var(--bg-panel); border-bottom: 1px solid var(--line-2);
}
.ad-tabs button {
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  background: transparent; border: 0; border-radius: var(--r-pill);
  padding: 5px 13px; cursor: pointer;
  transition: background .15s, color .15s;
}
.ad-tabs button:hover { background: var(--bg-hover); color: var(--ink-1); }
.ad-tabs button.on { background: var(--brand); color: var(--brand-ink); }
/* Halo «tócame» en la primera pestaña: presente en TODAS las maquetas y en ambos
   idiomas (botón del DOM, siempre alineado). Se quita al primer toque. */
.ad-tabs button.pulse {
  color: var(--primary); background: rgba(37, 99, 235, .09);
  animation: ad-pulse 1.8s var(--ease) .5s infinite;
}
.ad-hint { text-align: center; font-size: 13px; color: var(--ink-3); margin-top: 12px; }
/* instrucción de interacción de las escenas: azul, bajo los puntos del slide */
.fx-hint { color: var(--primary); font-weight: 600; font-size: 13.5px; margin-top: 14px; }
.browser img.shot { transition: opacity .25s var(--ease); }
.browser img.shot.swap { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .browser img.shot { transition: none; } }

/* Barra lateral clicable dentro de la captura (hotspots invisibles con el
   mismo hover que la app real) */
.ad-stage { position: relative; }
.ad-stage img { display: block; }
.ad-hs {
  position: absolute; left: 1%; width: 14.2%;
  background: transparent; border: 0; border-radius: 6px;
  cursor: pointer; padding: 0;
  transition: background .15s;
}
.ad-hs:hover { background: rgba(26, 26, 26, .06); }
.ad-hs:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
@keyframes ad-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .45); }
  70% { box-shadow: 0 0 0 12px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
/* El hotspot que invita a interactuar se ve: fondo tenue + anillo latiendo,
   hasta que la persona toca la captura (entonces se le quita .pulse). */
.ad-hs.pulse {
  background: rgba(37, 99, 235, .09);
  outline: 1.5px solid rgba(37, 99, 235, .4); outline-offset: -1.5px;
  animation: ad-pulse 1.8s var(--ease) .5s infinite;
}
@media (max-width: 560px) { .ad-hs { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .ad-hs { transition: none; }
  .ad-hs.pulse { animation: none; }
  .ad-tabs button.pulse { animation: none; }
}

/* ── Tarea por dentro sobre la captura real (hotspot de tarjeta + drawer) ── */
.ad-veil {
  position: absolute; inset: 0; z-index: 4;
  background: rgba(24, 20, 10, .3);
  opacity: 0; transition: opacity .3s var(--ease);
}
.ad-veil.show { opacity: 1; }
.ad-taskdrawer { text-align: left; }
.ad-taskdrawer .adw-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--ink-3); margin: 8px 0 12px;
}
@media (max-width: 560px) {
  .ad-hs.ad-task { display: block; }
  /* en móvil el drawer es una hoja inferior a pantalla, no cabe en la captura */
  .ad-veil { position: fixed; z-index: 59; }
  .fx-drawer.ad-taskdrawer {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 60;
    width: 100%; max-height: 78vh;
    border-left: none; border-top: 1px solid var(--line-1);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    transform: translateY(105%);
  }
  .fx-drawer.ad-taskdrawer.open { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ad-veil { transition: none; }
}

/* ── Vista «Plano» de invitados sobre la captura (mesas del banquete) ── */
.ad-floor {
  position: absolute; z-index: 6;
  left: 19.6%; top: 15.5%; right: 0; bottom: 0;
  background: var(--bg-app); border-left: 1px solid var(--line-1);
  padding: 16px 22px 0; text-align: left;
  display: flex; flex-direction: column; gap: 14px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .34s var(--ease);
}
.ad-floor.open { opacity: 1; transform: none; }
.ad-floor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex: none; }
.ad-floor-h b { display: block; font-size: 15px; letter-spacing: -0.01em; color: var(--ink-1); }
.ad-floor-h span { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.ad-seg { display: inline-flex; flex: none; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--bg-subtle); border: 1px solid var(--line-1); }
.ad-seg-b {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 0; background: transparent; color: var(--ink-2);
  font-size: 12.5px; font-weight: 600; line-height: 1; padding: 6px 13px; border-radius: var(--r-pill);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.ad-seg-b svg { width: 14px; height: 14px; }
.ad-seg-b.on { background: var(--ink-1); color: #fff; box-shadow: var(--shadow-1); }
.ad-seg-b:not(.on):hover { color: var(--ink-1); }
.ad-floor-body { flex: 1 1 auto; min-height: 0; padding-bottom: 18px; }
.ad-floor .fxm-stage { height: 100%; align-items: stretch; }
.ad-floor .fxm-rail { min-height: 0; overflow: hidden; }
.ad-floor .fxm-floor { height: 100%; min-height: 200px; }
@media (prefers-reduced-motion: reduce) {
  .ad-floor { transition: none; }
}

/* ============ Escenas vivas (flows HTML interactivos) ============ */
@keyframes fd-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .38); }
  70% { box-shadow: 0 0 0 12px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
@keyframes fx-in {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
}
.fd-bar {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; margin-top: 22px; text-align: center;
}
.fd-cap { flex: none; font-size: 17px; color: var(--ink-2); text-wrap: pretty; max-width: 72ch; }
.fd-cap b { color: var(--primary); }
/* Pill de paso, junto al comentario del slide */
.fd-pill {
  display: inline-flex; align-items: center; vertical-align: middle;
  margin-right: 9px; transform: translateY(-1.5px);
  background: var(--primary); color: #fff;
  font-size: 12.5px; font-weight: 700; line-height: 1; letter-spacing: -0.01em;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
.fd-dots { display: flex; gap: 8px; flex: none; justify-content: center; align-items: center; min-height: 10px; }
.fd-dots button {
  width: 8px; height: 8px;
  border-radius: 999px; border: 0; padding: 0; cursor: default;
  background: var(--line-strong);
  transition: width .34s var(--ease), background .2s var(--ease);
}
.fd-dots button.on { width: 22px; background: var(--primary); }
@media (prefers-reduced-motion: reduce) {
  .fd-dots button { transition: none; }
}
.fx-restart { flex: none; padding: 8px 16px; font-size: 14px; animation: fx-restart-halo 1.9s var(--ease) infinite; }
.fx-restart:hover { animation: none; box-shadow: 0 0 0 4px rgba(26, 26, 26, .14); }
/* Halo «pulso» del color del propio botón (oscuro, no azul): reclamo latiente de que es pulsable. */
@keyframes fx-restart-halo {
  0%   { box-shadow: 0 0 0 0 rgba(26, 26, 26, .40); }
  70%  { box-shadow: 0 0 0 12px rgba(26, 26, 26, 0); }
  100% { box-shadow: 0 0 0 0 rgba(26, 26, 26, 0); }
}
@media (prefers-reduced-motion: reduce) { .fx-restart { animation: none; } }

.fx { max-width: 900px; margin: 0 auto; }
.fx .browser { overflow: visible; }
.fx-shell {
  position: relative; background: var(--bg-app);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  padding: 20px 22px 24px; text-align: left; font-size: 13.5px;
  transition: min-height .3s var(--ease);
}
.fx-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.fx-top h4 { font-size: 16px; letter-spacing: -0.01em; }
.fx-top span { font-size: 11.5px; color: var(--ink-3); }

.fx-pulse { position: relative; }
.fx-pulse::after {
  content: ''; position: absolute; inset: -3px; border-radius: 10px;
  border: 2px solid var(--primary);
  animation: fd-pulse 1.8s var(--ease) infinite;
  pointer-events: none;
}
.fx-toast {
  position: absolute; right: 16px; top: 12px; z-index: 7;
  background: var(--brand); color: #fff;
  border-radius: var(--r-md); box-shadow: var(--shadow-pop);
  font-size: 12.5px; font-weight: 600; padding: 10px 14px; max-width: 300px;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.fx-toast.ok { background: var(--success-ink); }
.fx-toast.show { opacity: 1; transform: none; }

/* ── documento (finanzas) ── */
.fx-doc {
  background: var(--bg-panel); border: 1px solid var(--line-1);
  border-radius: var(--r-md); box-shadow: var(--shadow-1);
  padding: 15px 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.fx-doc .ic {
  width: 40px; height: 40px; border-radius: var(--r-sm); flex: none;
  background: var(--info-bg); color: var(--info-ink);
  display: grid; place-items: center;
  font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
}
.fx-doc.es-factura .ic { background: var(--warn-bg); color: var(--warn-ink); }
.fx-doc .who { min-width: 0; }
.fx-doc .who b { display: block; font-size: 14px; }
.fx-doc .who span { font-size: 12px; color: var(--ink-3); }
.fx-doc .right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.fx-doc .amt { font-size: 15px; font-weight: 700; white-space: nowrap; }
.fx-swap { transition: opacity .25s var(--ease); }
.fx-swap.fade { opacity: 0; }
.fx-kebab {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  border: 1px solid var(--line-1); background: var(--bg-panel);
  cursor: pointer; font-size: 17px; line-height: 1; color: var(--ink-2);
}
.fx-kebab:hover { background: var(--bg-hover); }
.fx-menu {
  position: absolute; z-index: 6; min-width: 216px;
  background: var(--bg-panel); border: 1px solid var(--line-1);
  border-radius: var(--r-md); box-shadow: var(--shadow-pop); padding: 6px;
  display: none;
}
.fx-menu.open { display: block; animation: fx-in .22s var(--ease); }
.fx-menu button {
  display: block; width: 100%; text-align: left;
  font: inherit; font-size: 13px; color: var(--ink-1);
  background: none; border: 0; border-radius: var(--r-xs);
  padding: 8px 10px; cursor: pointer;
}
.fx-menu button:hover { background: var(--bg-subtle); }
.fx-menu button.hot { color: var(--primary); font-weight: 600; }
.fx-menu .sep { height: 1px; background: var(--line-2); margin: 5px 4px; }
.fx-paybox {
  margin-top: 12px; padding: 13px 16px;
  background: var(--warn-bg); border: 1px solid rgba(138, 107, 30, .16);
  border-radius: var(--r-md);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  animation: fx-in .35s var(--ease);
}
.fx-paybox.done { background: var(--success-bg); border-color: rgba(0, 122, 73, .16); }
.fx-paybox .lbl b { display: block; font-size: 13.5px; }
.fx-paybox .lbl span { font-size: 11.5px; color: var(--ink-3); }
.fx-paybox .amt { margin-left: auto; font-size: 15px; font-weight: 700; }
.fx-paybox .btn { padding: 9px 16px; font-size: 13px; flex: none; }
.fx-note { margin-top: 10px; font-size: 12px; color: var(--ink-3); }

/* ── shell de app: menú lateral + panel (finanzas) ── */
.fx-app { display: grid; grid-template-columns: 138px 1fr; gap: 16px; align-items: start; }
.fx-app-side { background: var(--bg-panel); border: 1px solid var(--line-1); border-radius: var(--r-md); padding: 10px 8px; }
.fx-app-side .microlabel { display: block; padding: 0 9px 8px; }
.fx-app-side .nav-item { font-size: 12px; padding: 7px 9px; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); }
.fx-app-side .nav-item:hover { background: var(--bg-subtle); }
.fx-app-main { min-width: 0; }
.fx-home-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fx-home-kpis .k { background: var(--bg-panel); border: 1px solid var(--line-1); border-radius: var(--r-md); box-shadow: var(--shadow-1); padding: 13px 15px; }
.fx-home-kpis .k .microlabel { display: block; margin-bottom: 5px; }
.fx-home-kpis .k .v { font-size: 18px; font-weight: 700; }
@media (max-width: 560px) {
  .fx-app { grid-template-columns: 1fr; gap: 12px; }
  .fx-app-side { display: flex; flex-wrap: wrap; gap: 4px; }
  .fx-app-side .microlabel { width: 100%; padding-bottom: 2px; }
  .fx-app-side .nav-item { flex: 1 1 auto; text-align: center; }
}

/* ── kanban (crm) ── */
.fx-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fx-colh {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; color: var(--ink-2);
  padding: 0 2px 8px;
}
.fx-colh i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--ink-4)); flex: none; }
.fx-colh span { margin-left: auto; font-weight: 600; color: var(--ink-3); }
.fx-lead {
  background: var(--bg-panel); border: 1px solid var(--line-1);
  border-radius: var(--r-md); box-shadow: var(--shadow-1);
  padding: 12px 14px; margin-bottom: 8px; cursor: pointer;
  transition: box-shadow .18s var(--ease);
}
.fx-lead:hover { box-shadow: var(--shadow-pop); }
.fx-lead b { display: block; font-size: 13px; line-height: 1.3; }
.fx-lead .v { font-size: 12.5px; font-weight: 700; margin-top: 3px; }
.fx-lead .who { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); margin-top: 7px; }
.fx-lead .av { width: 18px; height: 18px; font-size: 7.5px; border-width: 1px; }
.fx-lead.moving { position: relative; z-index: 4; transition: transform .55s var(--ease), box-shadow .18s; box-shadow: var(--shadow-pop); }
.fx-ghost {
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-md);
  padding: 16px 12px; text-align: center; font-size: 11.5px; color: var(--ink-4);
}

/* ── drawer (crm) ── */
.fx-stagewrap { position: relative; overflow: hidden; border-radius: 0 0 var(--r-xl) var(--r-xl); }
/* La escena CRM abre un drawer alto (ficha del lead + chat de SofIA). El drawer
   es absolute (top/bottom:0), así que su alto lo fija el escenario; sin esto se
   quedaba a la altura de las columnas y cortaba la ficha. Damos altura de tablero
   a las columnas y un mínimo al escenario para que quepa holgado. Solo en CRM. */
[data-fx="crm"] .fx-col { min-height: 320px; }
[data-fx="crm"] .fx-stagewrap { min-height: 468px; }
.fx-drawer {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(400px, 92%); z-index: 5;
  background: var(--bg-panel); border-left: 1px solid var(--line-1);
  box-shadow: -18px 0 40px -22px rgba(24, 20, 10, .3);
  padding: 18px 20px; overflow: auto;
  transform: translateX(105%);
  transition: transform .4s var(--ease);
}
.fx-drawer.open { transform: none; }
.fx-drawer h5 { font-size: 15px; letter-spacing: -0.01em; margin-bottom: 2px; padding-right: 30px; }
.fx-x {
  position: absolute; top: 10px; right: 12px;
  border: 0; background: none; font-size: 18px; line-height: 1;
  color: var(--ink-3); cursor: pointer; padding: 4px 6px;
}
.fx-x:hover { color: var(--ink-1); }
.fx-field { margin-top: 13px; }
.fx-field p { font-size: 13px; margin-top: 3px; }
.fx-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.fx-wa-btn { margin-top: 16px; width: 100%; justify-content: center; font-size: 13.5px; padding: 10px 14px; background: #075E54; color: #fff; }
.fx-wa-btn:hover { background: #0a6c61; }
.fx-wa { margin-top: 14px; border-radius: var(--r-md); overflow: hidden; background: #EFE7DD; }
.fx-wa .wa-body { height: auto; min-height: 0; overflow: visible; justify-content: flex-start; }
@media (prefers-reduced-motion: reduce) {
  .fx-pulse::after { animation: none; }
  .fx-drawer, .fx-lead.moving, .fx-toast, .fx-drawer-foot { transition: none; }
  .fx-menu.open, .fx-paybox { animation: none; }
}

/* ── tarea (tareas): tablero por etapas + hub con checklist y chat ── */
.fx-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fx-progressrow { display: flex; align-items: center; gap: 10px; margin: -6px 0 14px; font-size: 11.5px; color: var(--ink-3); }
.fx-progressrow .progress { flex: 1; margin: 0; }
.fx-progressrow b { color: var(--ink-1); font-variant-numeric: tabular-nums; }
.fx-drawer .checklist { padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.fx-drawer .check-item { cursor: default; }
.fx-drawer button.check-item {
  font: inherit; color: var(--ink-2); text-align: left;
  background: none; border: 0; padding: 2px 6px; margin: -2px -6px; width: calc(100% + 12px);
}
.fx-drawer .check-item.todo { cursor: pointer; border-radius: var(--r-sm); }
.fx-drawer .check-item.todo:hover { background: var(--bg-subtle); }
.fx-drawer .chat { padding: 12px 0; background: transparent; }
.fx-drawer .msg .bubble { background: var(--bg-subtle); }
.fx-drawer .visibility-note { padding: 11px 0 0; }
.fx-done-btn { width: 100%; justify-content: center; font-size: 13.5px; padding: 10px 14px; margin-top: 18px; }
/* Barra de acción fija al fondo del hub: el CTA principal queda siempre a la vista
   aunque el checklist y el chat tengan scroll. */
.fx-drawer-foot {
  position: sticky; bottom: 0; z-index: 2;
  margin: 16px -20px 0; padding: 14px 20px;
  background: var(--bg-panel); border-top: 1px solid var(--line-2);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.fx-drawer-foot::before {
  content: ''; position: absolute; left: 0; right: 0; top: -22px; height: 22px;
  background: linear-gradient(to top, var(--bg-panel), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.fx-drawer-foot.enter { opacity: 0; transform: translateY(10px); }

/* ── semana (calendario) ── */
.fx-weekwrap { overflow-x: auto; }
.fx-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; min-width: 540px; }
.fx-dayh { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); text-align: center; padding-bottom: 2px; }
.fx-day {
  background: var(--bg-panel); border: 1px solid var(--line-1); border-radius: var(--r-md);
  min-height: 148px; padding: 6px; display: flex; flex-direction: column; gap: 6px;
}
.fx-evt { border-radius: var(--r-sm); padding: 6px 8px; font-size: 10.5px; font-weight: 600; line-height: 1.3; }
.fx-evt span { display: block; font-weight: 500; opacity: .75; font-size: 9.5px; }
.fx-evt.info { background: var(--info-bg); color: var(--info-ink); }
.fx-evt.violet { background: var(--violet-bg); color: var(--violet-ink); }
.fx-evt.danger { background: var(--danger-bg); color: var(--danger-ink); }
.fx-evt.success { background: var(--success-bg); color: var(--success-ink); }
.fx-evt.new { animation: fx-in .45s var(--ease); }
.fx-slot {
  font-family: inherit; font-size: 10.5px; color: var(--ink-4); text-align: left;
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-sm);
  padding: 6px 8px; background: none; cursor: pointer; width: 100%;
  transition: background .15s, color .15s;
}
.fx-slot:hover { background: var(--bg-hover); color: var(--ink-2); }
.fx-meetform {
  margin-top: 14px; background: var(--bg-panel); border: 1px solid var(--line-1);
  border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: 14px 16px;
  animation: fx-in .35s var(--ease);
}
.fx-meetform .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.fx-meetform .row + .row { margin-top: 8px; }
.fx-meetform b { font-size: 13.5px; }
.fx-meetform .d { font-size: 11.5px; color: var(--ink-3); }
.fx-meetform .btn { padding: 9px 16px; font-size: 13px; flex: none; }

/* ── correo de disponibilidad + vista del proveedor (prov) ── */
.fx-mail {
  max-width: 470px; margin: 0 auto; background: var(--bg-panel);
  border: 1px solid var(--line-1); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2); padding: 20px 22px;
}
.fx-mail.new { animation: fx-in .45s var(--ease); }
.fx-mail .from { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.fx-mail .from .av { width: 30px; height: 30px; font-size: 11px; }
.fx-mail .from b { font-size: 13px; display: block; line-height: 1.25; }
.fx-mail .from div span { font-size: 11px; color: var(--ink-3); }
.fx-mail .q { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 4px; }
.fx-mail .d { font-size: 12.5px; color: var(--ink-3); margin-bottom: 16px; }
.fx-mail .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.fx-mail .acts .btn { padding: 10px 18px; font-size: 13.5px; }
.fx-vendorview { max-width: 520px; margin: 0 auto; padding: 16px 18px; }
.fx-vendorview.new { animation: fx-in .45s var(--ease); }
.fx-vendorview .mm-head b { font-size: 13.5px; }
.fx-profile { max-width: 470px; margin: 0 auto; padding: 18px 20px; }
.fx-profile.new { animation: fx-in .45s var(--ease); }
.fx-profile .ph { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.fx-profile .ph .av { width: 38px; height: 38px; font-size: 13px; }
.fx-profile .ph b { display: block; font-size: 15px; }
.fx-profile .ph div span { font-size: 12px; color: var(--ink-3); }
.fx-profile .ph .pill { margin-left: auto; }

/* ── quick replies dentro del teléfono (sofia, contact) ── */
.fx-sofia {
  display: grid; grid-template-columns: minmax(0, 350px) minmax(0, 340px);
  gap: clamp(20px, 4vw, 48px); justify-content: center; align-items: start;
}
.fx-choices { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 4px 12px 14px; background: #EFE7DD; }
.fx-choices .lbl { font-size: 10px; color: var(--ink-3); text-align: center; margin: 2px 0; }
.fx-choice {
  font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.35;
  color: #075E54; background: #fff; border: 1.5px solid rgba(7, 94, 84, .55);
  border-radius: var(--r-pill); padding: 8px 14px; cursor: pointer; text-align: center;
  transition: background .15s, transform .15s var(--ease);
  animation: fx-in .35s var(--ease);
}
.fx-choice:hover { background: #E9F5F1; transform: translateY(-1px); }
.fx-crmside { padding: 16px 18px; }
.fx-crmside .microlabel { display: block; margin-bottom: 10px; }
.fx-crmside .ghostline {
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-sm);
  padding: 9px 12px; font-size: 11.5px; color: var(--ink-4); margin-bottom: 8px;
}
.fx-crmside .fx-field { margin-top: 11px; animation: fx-in .4s var(--ease); }
.fx-crmside .fx-field p { font-size: 12.5px; }

/* ── roles: el mismo evento, tres miradas ── */
.fx-rolebar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
button.fx-opt { font-family: inherit; cursor: pointer; flex: 0 1 auto; padding: 8px 18px; font-size: 13px; transition: border-color .15s, background .15s, color .15s; }
.fx-rolepanel { padding: 4px 18px; }
.fx-rolepanel .mm-row.off { display: none; }
.fx-rolepanel .mm-row.back { animation: fx-in .35s var(--ease); }
.fx-rolepanel .mm-row .val { font-size: 12px; color: var(--ink-2); text-align: right; }
.fx-rolepanel .mm-row .val b { font-size: 12px; }
.fx-rolewho { display: flex; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line-2); font-size: 12px; color: var(--ink-3); }
.fx-rolewho .av { width: 24px; height: 24px; font-size: 9px; }
.fx-rolewho b { color: var(--ink-1); font-size: 12.5px; }

/* ── módulos: switches + menú que crece ── */
.fx-mods { display: grid; grid-template-columns: 1.25fr .85fr; gap: 16px; align-items: start; }
.fx-modrow {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-panel); border: 1px solid var(--line-1); border-radius: var(--r-md);
  padding: 12px 14px; margin-bottom: 8px;
}
.fx-modrow .mi { min-width: 0; }
.fx-modrow b { font-size: 13px; display: block; }
.fx-modrow span { font-size: 11.5px; color: var(--ink-3); }
.fx-switch {
  margin-left: auto; flex: none; width: 36px; height: 20px; border-radius: var(--r-pill);
  border: 0; background: var(--line-strong); position: relative; cursor: pointer;
  transition: background .2s;
}
.fx-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform .2s var(--ease);
}
.fx-switch.on { background: var(--success); }
.fx-switch.on::after { transform: translateX(16px); }
.fx-sidenav { background: var(--bg-panel); border: 1px solid var(--line-1); border-radius: var(--r-md); padding: 10px 8px; }
.fx-sidenav .microlabel { display: block; padding: 0 9px 8px; }
.fx-sidenav .nav-item { font-size: 12px; padding: 6px 9px; }
.fx-sidenav .nav-item.new { animation: fx-in .35s var(--ease); color: var(--primary); font-weight: 600; }

/* ── quiz de plan (precios) ── */
.fx-quiz {
  max-width: 600px; margin: 0 auto; background: var(--bg-panel);
  border: 1px solid var(--line-1); border-radius: var(--r-xl);
  box-shadow: var(--shadow-2); padding: 22px 24px 24px;
}
.fx-quiz-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.fx-quiz-head h4 { font-size: 18px; letter-spacing: -0.02em; }
.fx-step {
  flex: none; font-size: 12px; font-weight: 600; color: var(--ink-cap);
  background: var(--bg-subtle); border-radius: var(--r-pill); padding: 5px 11px;
  white-space: nowrap;
}
.fx-step b { color: var(--primary); font-variant-numeric: tabular-nums; }
.fx-quiz .opts { display: flex; flex-direction: column; gap: 10px; }
.fx-qopt {
  --i: 0;
  font-family: inherit; color: var(--ink-1); width: 100%; text-align: left;
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--line-1); border-radius: var(--r-md);
  padding: 13px 15px; background: var(--bg-panel); cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease),
              box-shadow .18s var(--ease), transform .18s var(--ease);
  animation: fx-in .34s var(--ease) backwards; animation-delay: calc(var(--i) * .07s);
}
.fx-qico {
  flex: none; width: 42px; height: 42px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--bg-subtle); color: var(--ink-2);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.fx-qico svg { width: 22px; height: 22px; }
.fx-qtext { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.fx-qtext b { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.fx-qtext span { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-3); margin-top: 2px; }
.fx-qarrow {
  flex: none; width: 28px; height: 28px; border-radius: var(--r-pill);
  display: grid; place-items: center; color: var(--ink-4); background: transparent;
  transition: color .18s var(--ease), background .18s var(--ease), transform .2s var(--ease);
}
.fx-qarrow svg { width: 16px; height: 16px; }
.fx-qopt:hover, .fx-qopt:focus-visible {
  border-color: var(--primary); background: rgba(37, 99, 235, .045);
  transform: translateY(-2px); box-shadow: var(--shadow-pop);
}
.fx-qopt:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.fx-qopt:hover .fx-qico, .fx-qopt:focus-visible .fx-qico { background: var(--info-bg); color: var(--primary); }
.fx-qopt:hover .fx-qarrow, .fx-qopt:focus-visible .fx-qarrow { color: var(--primary); transform: translateX(3px); }
.fx-qopt:active { transform: translateY(0); box-shadow: var(--shadow-2); }
.fx-planres { animation: fx-in .4s var(--ease); }
.fx-planres .pr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.fx-planres .pr-head h5 { font-size: 19px; letter-spacing: -0.02em; }
.fx-planres .pr-price { font-size: 22px; font-weight: 700; color: var(--primary); letter-spacing: -0.02em; }
.fx-planres .pr-price small { font-size: 12px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.fx-planres .pr-after { font-size: 12.5px; color: var(--ink-cap); margin-bottom: 12px; }
.fx-planres .caps { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.fx-planres .f-list { gap: 8px; margin-bottom: 16px; }
.fx-planres .f-list li { font-size: 14px; }
.fx-planres .pr-ctas { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fx-planres .pr-ctas .btn { padding: 11px 20px; font-size: 14.5px; }
.fx-qback {
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--ink-3);
  background: none; border: 0; cursor: pointer; padding: 6px 2px;
}
.fx-qback:hover { color: var(--ink-1); }

@media (max-width: 760px) {
  .fx-board, .fx-mods { grid-template-columns: 1fr; }
  .fx-sofia { grid-template-columns: minmax(0, 350px); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-evt.new, .fx-meetform, .fx-mail.new, .fx-vendorview.new, .fx-profile.new,
  .fx-choice, .fx-crmside .fx-field, .fx-rolepanel .mm-row.back, .fx-sidenav .nav-item.new,
  .fx-qopt, .fx-planres { animation: none; }
  .fx-switch, .fx-switch::after, .fx-slot, .fx-choice, .fx-qopt, button.fx-opt { transition: none; }
  .fx-choice:hover { transform: none; }
  .fx-qopt:hover, .fx-qopt:focus-visible { transform: none; }
  .fx-qopt:hover .fx-qarrow, .fx-qopt:focus-visible .fx-qarrow { transform: none; }
}

/* ── rsvp ── */
.fx-rsvp-grid { display: grid; grid-template-columns: 1fr 290px; gap: 16px; align-items: start; }
.fx-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 13px; }
.fx-stat { background: var(--bg-panel); border: 1px solid var(--line-1); border-radius: var(--r-md); padding: 10px 12px; }
.fx-stat b { display: block; font-size: 18px; letter-spacing: -0.01em; }
.fx-stat span { font-size: 10.5px; color: var(--ink-3); }
.fx-stat.ok b { color: var(--success-ink); }
.fx-stat.pen b { color: var(--warn-ink); }
.fx-stat.no b { color: var(--danger-ink); }
.fx-guest {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-panel); border: 1px solid var(--line-1);
  border-radius: var(--r-md); padding: 9px 12px; margin-bottom: 7px;
}
.fx-guest.new { animation: fx-in .45s var(--ease); }
.fx-guest .who b { display: block; font-size: 12.5px; }
.fx-guest .who span { font-size: 11px; color: var(--ink-3); }
.fx-guest .right { margin-left: auto; flex: none; }
.fx-form {
  background: var(--bg-panel); border: 1px solid var(--line-1);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: 16px;
}
.fx-form .fhead { font-size: 12px; color: var(--ink-3); margin-bottom: 10px; }
.fx-form .fname { font-size: 14.5px; font-weight: 700; margin-bottom: 10px; }
.fx-opts { display: flex; gap: 6px; margin-bottom: 10px; }
.fx-opt {
  flex: 1; text-align: center; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  padding: 7px 4px; color: var(--ink-2); background: var(--bg-panel);
}
.fx-opt.sel { border-color: var(--primary); color: var(--primary); background: rgba(37, 99, 235, .07); }
.fx-opt.sel.nope { border-color: var(--danger); color: var(--danger-ink); background: var(--danger-bg); }
.fx-menu-line { font-size: 12px; color: var(--ink-2); background: var(--bg-subtle); border-radius: var(--r-sm); padding: 7px 10px; margin-bottom: 12px; }
.fx-form .btn { width: 100%; justify-content: center; font-size: 13.5px; padding: 10px 14px; }
@media (max-width: 760px) {
  .fx-cols { grid-template-columns: 1fr; }
  .fx-rsvp-grid { grid-template-columns: 1fr; }
  .fx-stats { grid-template-columns: repeat(2, 1fr); }
  .fx-drawer { width: 100%; }
}

/* ── mesas: plano del banquete vivo (carril de invitados + lienzo) ── */
.fxm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.fxm-head h4 { font-size: 16px; letter-spacing: -0.01em; }
.fxm-head > div > span { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.fxm-tables { flex: none; transition: background .3s var(--ease), color .3s var(--ease); }
.fxm-stage { display: grid; grid-template-columns: 158px 1fr; gap: 16px; align-items: stretch; }

.fxm-rail { background: var(--bg-panel); border: 1px solid var(--line-1); border-radius: var(--r-md); box-shadow: var(--shadow-1); padding: 12px; }
.fxm-railhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.fxm-railhead b { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.fxm-left { min-width: 22px; text-align: center; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: var(--r-pill); background: var(--info-bg); color: var(--info-ink); transition: background .3s, color .3s; }
.fxm-left.done { background: var(--success-bg); color: var(--success-ink); }
.fxm-guests { display: flex; flex-direction: column; gap: 7px; }
.fxm-guest { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--bg-subtle); border: 1px solid transparent; transition: opacity .3s, background .3s var(--ease); }
.fxm-guest .av { flex: none; width: 24px; height: 24px; font-size: 9px; border-width: 1.5px; }
.fxm-gtext { min-width: 0; line-height: 1.2; }
.fxm-gtext b { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxm-gtext > span { font-size: 10px; color: var(--ink-3); }
.fxm-gtick { margin-left: auto; flex: none; color: var(--success-ink); font-weight: 800; font-size: 11px; opacity: 0; transform: scale(.4); transition: opacity .25s, transform .25s var(--ease); }
.fxm-guest.flying { opacity: .4; }
.fxm-guest.seated { background: var(--success-bg); }
.fxm-guest.seated .fxm-gtext b { color: var(--ink-2); }
.fxm-guest.seated .fxm-gtick { opacity: 1; transform: none; }
.fxm-guest.pending { background: transparent; border-color: var(--line-strong); border-style: dashed; }
.fxm-guest.pending .av { filter: grayscale(.7); opacity: .65; }
.fxm-guest.pending .fxm-gtext > span { color: var(--ink-4); font-style: italic; }
.fxm-guest.confirmed { background: var(--success-bg); }
.fxm-guest.confirmed .fxm-gtext > span { color: var(--success-ink); font-style: normal; font-weight: 600; }

.fxm-floor {
  position: relative; height: 322px; border: 1px solid var(--line-1); border-radius: var(--r-md);
  background-color: var(--bg-app);
  background-image: radial-gradient(var(--line-2) 1.2px, transparent 1.2px);
  background-size: 19px 19px; overflow: hidden;
}
.fxm-table { position: absolute; width: 104px; height: 104px; transform: translate(-50%, -50%); }
.fxm-top {
  position: absolute; inset: 26px; border-radius: 50%; z-index: 2;
  background: var(--bg-panel); border: 1.5px solid var(--line-strong);
  display: grid; place-items: center; text-align: center; line-height: 1.1; box-shadow: var(--shadow-1);
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.fxm-top b { font-size: 12px; font-weight: 700; }
.fxm-cap { font-size: 9px; font-weight: 600; color: var(--ink-3); }
.fxm-table.full .fxm-top { background: var(--success-bg); border-color: var(--success); }
.fxm-table.full .fxm-cap { color: var(--success-ink); }
.fxm-table.warn .fxm-top { background: var(--warn-bg); border-color: var(--warn); }
.fxm-table.warn .fxm-cap { color: var(--warn-ink); }
.fxm-seat {
  position: absolute; width: 17px; height: 17px; border-radius: 50%; z-index: 1;
  background: var(--bg-panel); border: 1.5px solid var(--line-strong);
  display: grid; place-items: center; font-size: 7px; font-weight: 700; color: #fff;
  transition: transform .32s var(--ease), background .3s var(--ease), border-color .3s var(--ease), opacity .3s;
}
.fxm-seat.on { background: var(--ink-4); border-color: transparent; }
.fxm-seat.hid { transform: scale(0); opacity: 0; }
.fxm-name {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 5px;
  white-space: nowrap; font-size: 10px; font-weight: 600; color: var(--ink-3);
}
.fxm-table.fresh { transform: translate(-50%, -50%) scale(.15); opacity: 0; }
.fxm-table.fresh.in { transform: translate(-50%, -50%) scale(1); opacity: 1; transition: transform .5s var(--ease), opacity .35s; }
.fxm-ghostslot {
  width: 104px; height: 104px; border-radius: 50%; border: 1.5px dashed var(--line-strong);
  background: rgba(255, 255, 255, .35); display: grid; place-items: center;
  color: var(--ink-4); transition: opacity .3s;
}
.fxm-ghostslot .fxm-plus { font-size: 26px; font-weight: 300; line-height: 1; }
.fxm-ghostslot.out { opacity: 0; }
.fxm-flyer {
  position: absolute; z-index: 9; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-size: 9px; font-weight: 700;
  border: 1.5px solid #fff; box-shadow: var(--shadow-pop); pointer-events: none;
  transition: transform .6s var(--ease);
}
@media (max-width: 640px) {
  .fxm-stage { grid-template-columns: 1fr; gap: 12px; }
  .fxm-guests { flex-direction: row; flex-wrap: wrap; }
  .fxm-guest { flex: 1 1 44%; }
  .fxm-floor { height: 300px; }
  /* a 3 mesas de ancho, las de 104px se rozan: se encogen para respirar */
  .fxm-table { transform: translate(-50%, -50%) scale(.8); }
  .fxm-table.fresh { transform: translate(-50%, -50%) scale(.1); }
  .fxm-table.fresh.in { transform: translate(-50%, -50%) scale(.8); }
}
@media (prefers-reduced-motion: reduce) {
  .fxm-table, .fxm-table.fresh.in, .fxm-seat, .fxm-flyer, .fxm-guest, .fxm-top, .fxm-ghostslot, .fxm-left { transition: none; }
}

/* ============ Vídeo de Academia (tarjeta reutilizable) ============ */
.vid-thumb {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  padding: 0; border: 1px solid var(--line-1); border-radius: var(--r-md);
  overflow: hidden; cursor: pointer; background: var(--bg-subtle);
  box-shadow: var(--shadow-1);
  transition: box-shadow .18s var(--ease), transform .18s var(--ease);
}
.vid-thumb:hover { box-shadow: var(--shadow-pop); transform: translateY(-2px); }
.vid-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vid-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid-play { position: absolute; inset: 0; display: grid; place-items: center; }
.vid-play i {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(26, 26, 26, .82); display: grid; place-items: center;
  transition: background .15s, transform .18s var(--ease);
}
.vid-thumb:hover .vid-play i { background: var(--primary); transform: scale(1.08); }
.vid-play svg { width: 15px; height: 15px; fill: #fff; margin-left: 3px; }
.vid b { display: block; font-size: 15px; font-weight: 600; margin: 12px 2px 2px; line-height: 1.35; }
.vid p { font-size: 13.5px; color: var(--ink-2); margin: 0 2px; }
@media (prefers-reduced-motion: reduce) {
  .vid-thumb, .vid-play i { transition: none; }
  .vid-thumb:hover { transform: none; }
}

/* ── Bloque "míralo en vídeo" en páginas de módulo ── */
.learn-row {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 5vw, 64px); align-items: center;
  background: var(--bg-panel); border: 1px solid var(--line-1);
  border-radius: var(--r-xl); box-shadow: var(--shadow-2);
  padding: clamp(24px, 4vw, 44px);
}
.learn-row h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin-bottom: 7px; }
.learn-row .learn-copy p { color: var(--ink-2); font-size: 15px; margin-bottom: 18px; max-width: 46ch; }
@media (max-width: 760px) { .learn-row { grid-template-columns: 1fr; } }

/* ============ Promo flotante: píldora fina centrada (Holded/Instagram) ============ */
/* z: 65 — por debajo del aviso de idioma (69/70) */
.fab-promo {
  --mx: 50%; --my: 50%;
  position: fixed; left: 50%; bottom: 20px; z-index: 65;
  isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 18px;
  color: var(--brand-ink);
  /* Cristal ácido: oscuro translúcido con blur + aurora y un poco de halo */
  background: rgba(14, 15, 20, .9);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-pill);
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  padding: 9px 10px 9px 22px; max-width: calc(100vw - 32px);
  opacity: 0; transform: translateX(-50%) translateY(16px); pointer-events: none;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.fab-promo::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(85% 150% at 8% -30%, rgba(91, 143, 232, .22), transparent 60%),
    radial-gradient(85% 150% at 94% 130%, rgba(155, 126, 219, .18), transparent 62%);
}
.fab-promo::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx) var(--my),
    rgba(130, 175, 255, .24), rgba(130, 175, 255, .06) 45%, transparent 72%);
  opacity: 0; transition: opacity .4s ease;
}
.fab-promo.is-lit::after { opacity: 1; }
.fab-promo > * { position: relative; z-index: 1; }
.fab-promo.show { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
.fab-promo .av-stack { flex: none; display: inline-flex; }
.fab-promo .av { position: relative; overflow: hidden; width: 30px; height: 30px; font-size: 11px; border-color: #14151c; }
.fab-promo .av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fab-promo .av-stack .av + .av { margin-left: -9px; }
.fab-promo p { margin: 0; font-size: 14px; font-weight: 600; color: var(--brand-ink); white-space: nowrap; }
.fab-promo .fp-ctas { display: flex; gap: 10px; flex: none; }
.fab-promo .fp-ctas .btn { padding: 9px 18px; font-size: 13.5px; border-radius: var(--r-pill); white-space: nowrap; }
.fab-promo .fp-demo { background: rgba(255, 255, 255, .14); color: #fff; }
.fab-promo .fp-demo:hover { background: rgba(255, 255, 255, .24); }
.fab-promo .fp-free { background: #fff; color: var(--ink-1); }
.fab-promo .fp-free:hover { background: var(--bg-subtle); }
.fab-promo .fp-google {
  background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
  display: inline-flex; align-items: center; gap: 7px;
}
.fab-promo .fp-google img { width: 15px; height: 15px; flex: none; }
.fab-promo .fp-google:hover { background: rgba(255, 255, 255, .1); }
@media (max-width: 1240px) { .fab-promo p { display: none; } }
.fab-promo .fp-close {
  flex: none; border: 0; background: transparent;
  color: rgba(255, 255, 255, .65); font-size: 16px; line-height: 1;
  cursor: pointer; padding: 8px 10px;
}
.fab-promo .fp-close:hover { color: #fff; }
@media (max-width: 900px) { .fab-promo { display: none; } }
@media (prefers-reduced-motion: reduce) { .fab-promo { transition: none; } }

/* ============ Modal de salida (exit intent) ============ */
.exit-pop {
  position: fixed; left: 50%; top: 50%; z-index: 70;
  width: min(460px, calc(100vw - 32px));
  background: var(--bg-panel);
  border: 1px solid var(--line-1); border-radius: var(--r-xl);
  box-shadow: var(--shadow-pop); padding: 30px 30px 26px;
  text-align: center;
  opacity: 0; transform: translate(-50%, -50%) translateY(12px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.exit-pop.show { opacity: 1; transform: translate(-50%, -50%); }
.exit-pop { max-height: calc(100vh - 40px); overflow: auto; }
.exit-pop .ep-hey {
  display: block; font-size: 19px; font-weight: 800;
  letter-spacing: .1em; color: var(--primary);
  margin-bottom: 12px;
}
.exit-pop .ep-video {
  display: block; width: 100%; border-radius: var(--r-lg);
  margin: 0 0 16px; background: var(--bg-app);
}
@media (prefers-reduced-motion: reduce) { .exit-pop .ep-video { display: none; } }
.exit-pop h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 10px; }
.exit-pop p { font-size: 15px; color: var(--ink-2); margin-bottom: 18px; text-wrap: pretty; }
.exit-pop .ep-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.exit-pop .ep-actions .btn { padding: 10px 20px; font-size: 14.5px; }
.exit-pop .micro { font-size: 12.5px; color: var(--ink-3); margin: 12px 0 0; }
@media (prefers-reduced-motion: reduce) { .exit-pop { transition: none; } }

/* ============================================================
   Escena viva del hero (data-fx="hero"): el caos se ordena
   ============================================================ */
.fx-hero { position: relative; }
.fx-hero .browser { position: relative; }
.fxh-veil {
  position: absolute; inset: 0; z-index: 5;
  background: var(--bg-body); opacity: .58;
  border-radius: inherit; pointer-events: none;
  transition: opacity .7s var(--ease);
}
.fxh-veil.off { opacity: 0; }
.fxh-layer { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.fxh-toasts { position: absolute; inset: 46px 0 0; z-index: 8; pointer-events: none; }
.fxh-note, .fxh-wa {
  background: #fff; border-radius: 14px; box-shadow: var(--shadow-pop);
  padding: 12px 14px; text-align: left;
}
.fxh-note {
  position: absolute; width: min(320px, 52%);
  opacity: 0; transform: translateY(16px) scale(.92) rotate(var(--rot, 0deg));
  transition: opacity .45s var(--ease), transform .7s var(--ease);
}
.fxh-note.pop { opacity: 1; transform: rotate(var(--rot, 0deg)); }
.fxh-note.fly {
  opacity: 0; transform: translate(var(--fx, 0px), var(--fy, 40px)) scale(.28);
  transition: transform .85s cubic-bezier(.65, 0, .35, 1), opacity .45s var(--ease) .45s;
}
.fxh-note .nh, .fxh-wa .nh {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; color: var(--ink-3); margin-bottom: 6px;
}
.fxh-note .nh img, .fxh-wa .nh img { width: 16px; height: 16px; }
.fxh-note .nh b, .fxh-wa .nh b { font-size: 11.5px; font-weight: 650; color: var(--ink-2); }
.fxh-wa .nh b.sofia { color: var(--primary); }
.fxh-note .nbadge {
  margin-left: auto; font-style: normal; font-weight: 700; font-size: 10.5px;
  background: #FF3B30; color: #fff; border-radius: 999px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-grid; place-items: center;
}
.fxh-note .nb, .fxh-wa .nb { font-size: 13px; line-height: 1.45; color: var(--ink-1); }
.fxh-note .nb b, .fxh-wa .nb b { font-weight: 650; }
.fxh-xls {
  width: 16px; height: 16px; border-radius: 4px; flex: none;
  background: #1D6F42; color: #fff; font-size: 10px; font-weight: 800;
  display: inline-grid; place-items: center;
}
.fxh-wa {
  position: absolute; right: 18px; bottom: 18px; z-index: 8;
  width: min(300px, 72%);
  opacity: 0; transform: translateY(14px) scale(.95);
  transition: opacity .45s var(--ease), transform .6s var(--ease);
}
.fxh-wa.pop { opacity: 1; transform: none; }
.fxh-wa.swap { opacity: 0; }
.fxh-wa.done { box-shadow: var(--shadow-pop), 0 0 0 2px rgba(37, 99, 235, .25); }
.fxh-glow { animation: fxh-ring 1s var(--ease) 1; }
@keyframes fxh-ring {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .5); }
  100% { box-shadow: 0 0 0 14px rgba(37, 99, 235, 0); }
}
.fxh-replay {
  margin-left: auto; font: inherit; font-size: 11.5px; font-weight: 600;
  color: var(--ink-2); background: var(--bg-panel);
  border: 1px solid var(--line-1); border-radius: 999px;
  padding: 3px 12px; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .4s var(--ease);
}
.fxh-replay.show { opacity: 1; pointer-events: auto; animation: fx-restart-halo 1.9s var(--ease) infinite; }
.fxh-replay:hover { color: var(--ink-1); background: var(--bg-hover); animation: none; box-shadow: 0 0 0 4px rgba(26, 26, 26, .14); }
@media (prefers-reduced-motion: reduce) { .fxh-replay { animation: none; } }
@media (max-width: 900px) {
  .fxh-note { width: min(260px, 80%); }
  /* el mock apilado es muy alto: la notificación de SofIA se fija al viewport */
  .fxh-wa {
    position: fixed; left: 14px; right: 14px; bottom: 14px;
    width: auto; z-index: 60; pointer-events: none;
  }
  .fxh-wa.bye { opacity: 0; transform: translateY(14px); }
}
/* En móvil las notas se apilan como en una pantalla de bloqueo */
@media (max-width: 640px) {
  .fxh-note { left: 14px !important; right: 14px !important; width: auto !important; }
  .fxh-layer .fxh-note:nth-child(1) { top: 92px !important; }
  .fxh-layer .fxh-note:nth-child(2) { top: 208px !important; }
  .fxh-layer .fxh-note:nth-child(3) { top: 324px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .fxh-veil, .fxh-layer, .fxh-wa, .fxh-toasts, .fxh-replay { display: none !important; }
}

/* ============================================================
   Escena del caos 23:40 (data-fx="caos"): nada se resuelve aquí
   ============================================================ */
.fxc-grid { display: grid; grid-template-columns: 300px 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
/* proporción real de teléfono: ~1:2 con el marco */
.fxc .wa-phone { width: min(300px, 100%); }
.fxc .wa-body { min-height: 0; justify-content: flex-end; overflow: hidden; }
.fxc .wa-head .fxc-clock {
  margin-left: auto; font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fxc-tag { display: block; font-size: 9.5px; font-weight: 700; color: var(--ink-3); margin-bottom: 2px; }
.fxc-novia { box-shadow: 0 1px 1px rgba(0, 0, 0, .08), 0 0 0 2px rgba(37, 99, 235, .4); }
.fxc-search { padding: 18px 20px; }
.fxc-q b { display: block; font-size: 15.5px; margin: 3px 0 12px; }
.fxc-q .caret {
  display: inline-block; width: 2px; height: 1em; background: var(--ink-1);
  margin-left: 3px; vertical-align: -2px;
  animation: fxc-caret 1.1s steps(1) infinite;
}
@keyframes fxc-caret { 50% { opacity: 0; } }
.fxc-row {
  display: flex; align-items: center; gap: 11px; padding: 11px 0;
  border-top: 1px solid var(--line-2);
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.fxc-row.show { opacity: 1; transform: none; }
.fxc-row img { width: 18px; height: 18px; flex: none; }
.fxc-row b { display: block; font-size: 12.5px; }
.fxc-row span { display: block; font-size: 11.5px; color: var(--ink-3); }
.fxc-row .mark {
  margin-left: auto; flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.fxc-row .mark.no { background: var(--danger-bg); color: var(--danger-ink); }
.fxc-row .mark.meh { background: var(--warn-bg); color: var(--warn-ink); }
.fxc-tally { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.fxc-tally .pill {
  opacity: 0; transform: scale(.9);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.fxc-tally .pill.show { opacity: 1; transform: none; }
.fxc-note {
  margin-top: 18px; font-size: 14.5px; color: var(--ink-2);
  max-width: 46ch; text-wrap: pretty;
  opacity: 0; transition: opacity .5s var(--ease);
}
.fxc-note.show { opacity: 1; }
.fxc-note b { color: var(--ink-1); }
.fxc-restart { display: block; width: fit-content; margin: 18px 0 0 auto; }
@media (max-width: 900px) {
  .fxc-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .fxc-q .caret { animation: none; }
  .fxc-row, .fxc-tally .pill { opacity: 1 !important; transform: none !important; transition: none; }
  .fxc-note { opacity: 1 !important; transition: none; }
}

/* ============================================================
   Escena VS (data-fx="vs"): WhatsApp/Excel/Trello suspenden,
   Hubents entra al final con el ✓
   ============================================================ */
.fxv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.fxv-card { position: relative; padding: 16px; overflow: hidden; }
.fxv-card .fxv-body { transition: opacity .4s var(--ease), filter .4s var(--ease); }
.fxv-card.off .fxv-body { opacity: .5; filter: saturate(.5); }
.fxv-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; margin-bottom: 12px; }
.fxv-head img { width: 18px; height: 18px; }
.fxv-tr {
  width: 16px; height: 16px; border-radius: 4px; flex: none;
  background: #0079BF; color: #fff; font-size: 10px; font-weight: 800;
  display: inline-grid; place-items: center;
}
.fxv-body { min-height: 122px; position: relative; }
.fxv-bub {
  background: #DCF8C6; border-radius: 9px; padding: 6px 9px;
  font-size: 11.5px; line-height: 1.35; margin-bottom: 6px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .06);
  opacity: 0; transform: translateY(8px) rotate(var(--r, 0deg));
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.fxv-bub.show { opacity: 1; transform: rotate(var(--r, 0deg)); }
.fxv-bub b { display: block; font-size: 9px; color: var(--ink-3); }
.fxv-sheet {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line-1); border-radius: 6px; overflow: hidden;
  margin-bottom: 8px; background: #fff;
}
.fxv-sheet span { border: .5px solid var(--line-2); font-size: 9.5px; padding: 5px 6px; color: var(--ink-3); min-height: 23px; }
.fxv-sheet span.err { color: var(--danger-ink); font-weight: 800; opacity: 0; transition: opacity .3s var(--ease); }
.fxv-sheet span.err.show { opacity: 1; }
.fxv-file {
  font-size: 10.5px; color: var(--ink-2);
  background: var(--bg-panel); border: 1px solid var(--line-1); border-radius: 6px;
  padding: 5px 8px; margin-bottom: 5px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.fxv-file.show { opacity: 1; transform: none; }
.fxv-kan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fxv-kan .col { background: var(--bg-panel); border: 1px solid var(--line-2); border-radius: 6px; padding: 5px; }
.fxv-kan .col i { display: block; font-style: normal; font-size: 8.5px; color: var(--ink-3); margin-bottom: 4px; }
.fxv-kan .blk { height: 15px; border-radius: 4px; background: var(--line-2); margin-bottom: 4px; }
.fxv-q {
  position: absolute; left: 50%; bottom: 4px; width: max-content; max-width: 100%;
  background: #fff; border: 1px solid var(--line-1); border-radius: 999px;
  box-shadow: var(--shadow-pop);
  font-size: 11px; font-weight: 600; padding: 6px 12px;
  opacity: 0; transform: translate(-50%, 8px);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.fxv-q.show { opacity: 1; transform: translate(-50%, 0); }
.fxv-stamp {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: var(--danger-bg); color: var(--danger-ink);
  font-size: 11px; font-weight: 800; padding: 5px 10px; border-radius: 8px;
  opacity: 0; transform: rotate(-6deg) scale(1.7);
  transition: opacity .25s var(--ease), transform .3s var(--ease);
}
.fxv-stamp.on { opacity: 1; transform: rotate(-6deg) scale(1); }
.fxv-stamp.ok {
  position: static; margin-left: auto; flex: none;
  background: var(--success-bg); color: var(--success-ink);
  transform: rotate(-4deg) scale(1.7);
}
.fxv-stamp.ok.on { transform: rotate(-4deg) scale(1); }
.fxv-win {
  display: flex; align-items: center; gap: 14px;
  margin-top: 14px; padding: 16px 18px;
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.fxv-win.show { opacity: 1; transform: none; }
.fxv-win img { height: 34px; width: auto; flex: none; }
.fxv-win .t b { display: block; font-size: 14px; margin-bottom: 7px; }
.fxv-win .chips { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .fxv-grid { grid-template-columns: 1fr; }
  .fxv-body { min-height: 0; }
  .fxv-win { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .fxv-bub, .fxv-file, .fxv-q, .fxv-stamp, .fxv-win, .fxv-sheet span.err, .fxv-card .fxv-body {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .fxv-stamp { transform: rotate(-6deg) !important; }
  .fxv-stamp.ok { transform: rotate(-4deg) !important; }
}

/* ============================================================
   Escena del baile (data-fx="baile", proveedores): tres canales,
   cero contexto, presupuestos sin respuesta
   ============================================================ */
.fxb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; max-width: 880px; margin: 0 auto; }
.fxb-msg {
  background: #fff; border-radius: 14px; box-shadow: var(--shadow-pop);
  padding: 12px 14px; text-align: left; margin-bottom: 10px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .4s var(--ease), transform .45s var(--ease);
}
.fxb-msg.show { opacity: 1; transform: none; }
.fxb-msg .nh { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ink-3); margin-bottom: 5px; }
.fxb-msg .nh img { width: 16px; height: 16px; }
.fxb-msg .nh b { font-size: 11.5px; font-weight: 650; color: var(--ink-2); }
.fxb-msg .nb { font-size: 13px; line-height: 1.45; }
.fxb-msg .nb b { font-weight: 650; }
.fxb-ig {
  width: 16px; height: 16px; border-radius: 5px; flex: none;
  background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF);
  color: #fff; font-size: 8px; font-weight: 800;
  display: inline-grid; place-items: center;
}
.fxb-quotes { padding: 16px 18px 8px; text-align: left; }
.fxb-quotes .qh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fxb-quotes .qh b { font-size: 13.5px; }
.fxb-quotes .qh span { font-size: 11px; color: var(--ink-3); }
.fxb .fxc-tally { justify-content: center; margin-top: 18px; }
.fxb .fxc-note { text-align: center; margin: 14px auto 0; }
@media (max-width: 900px) {
  .fxb-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .fxb-msg { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ============================================================
   Escena hallado (data-fx="hallado", proveedores): el directorio
   te trae una petición sobre el perfil público autoral
   ============================================================ */
.fxd { position: relative; }
.fxd-req {
  position: absolute; right: -6px; bottom: -16px; z-index: 3;
  width: min(300px, 92%);
  background: #fff; border-radius: 14px; box-shadow: var(--shadow-pop);
  padding: 13px 15px; text-align: left;
  opacity: 0; transform: translateY(12px) scale(.96);
  transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.fxd-req.pop { opacity: 1; transform: none; }
.fxd-req .nh { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ink-3); margin-bottom: 5px; }
.fxd-req .nh b { color: var(--primary); font-size: 11.5px; }
.fxd-req .nb { font-size: 13px; line-height: 1.5; margin-bottom: 10px; }
.fxd-req .btn { padding: 8px 18px; font-size: 13px; }
.fxd-req.ok { box-shadow: var(--shadow-pop), 0 0 0 2px rgba(0, 122, 73, .25); }
.fxd-req.ok .nb { margin-bottom: 0; color: var(--success-ink); font-weight: 600; }

/* ============================================================
   Escena hubtask (data-fx="hubtask", proveedores): la tarea por
   dentro — checklist, chat con la planner y cierre en vivo
   ============================================================ */
.fxt .taskhub { max-width: 560px; margin: 0 auto; box-shadow: var(--shadow-pop); position: relative; }
.fxt .check-item, .fxt .msg, .fxt .chat-input, .fxt .visibility-note {
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s var(--ease), transform .45s var(--ease);
}
.fxt .check-item.show, .fxt .msg.show, .fxt .chat-input.show, .fxt .visibility-note.show {
  opacity: 1; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .fxt .check-item, .fxt .msg, .fxt .chat-input, .fxt .visibility-note {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* Las filas de los mini-mocks entran en cascada al hacer scroll */
.js .reveal .mini-mock .mm-row {
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.js .reveal.in .mini-mock .mm-row { opacity: 1; transform: none; }
.js .reveal.in .mini-mock .mm-row:nth-child(2) { transition-delay: .12s; }
.js .reveal.in .mini-mock .mm-row:nth-child(3) { transition-delay: .24s; }
.js .reveal.in .mini-mock .mm-row:nth-child(4) { transition-delay: .36s; }
.js .reveal.in .mini-mock .mm-row:nth-child(5) { transition-delay: .48s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal .mini-mock .mm-row { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ===== Repaso final: fixes móvil ===== */
/* El hint de "toca dentro de la captura" no aplica en táctil: ocultarlo en móvil */
@media (max-width: 700px) { .ad-hint { display: none; } }