/* ============================================================
   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: 22px; width: auto; }
.nav-links { display: flex; gap: 32px; list-style: none; margin-left: 60px; }
.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-cap); 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-cap); }
.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,.6); 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-cap); 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-cap); }
.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-cap); }

/* 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); }
/* Cambio de moneda debajo de las pestañas de planes: discreto y en grises,
   sin competir con el segmented control de audiencia (clase propia para no
   engancharse al listener genérico de .tab-btn en site.js) */
.cur-seg { display: flex; align-items: center; justify-content: center; width: fit-content; margin: -8px auto 32px; gap: 10px; font-size: 12.5px; }
.cur-seg button { font-family: var(--font); font-weight: 500; cursor: pointer; border: 0; background: transparent; color: var(--ink-cap); padding: 2px 4px; border-radius: 4px; transition: color .18s var(--ease); }
.cur-seg button:hover { color: var(--ink-1); }
.cur-seg button.on { color: var(--ink-1); font-weight: 700; cursor: default; }
.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-cap); }

/* 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-currency { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 13.5px; }
.foot-currency svg { width: 16px; height: 16px; flex: none; stroke: var(--ink-cap); stroke-width: 1.4; fill: none; }
.foot-currency button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--ink-cap); }
.foot-currency button.on { font-weight: 600; color: var(--ink-1); cursor: default; }
.foot-currency button:hover:not(.on) { color: var(--ink-1); }
/* Footer: en móvil las columnas se pliegan en acordeones (<details>); en
   escritorio (≥901) se muestran las 5 columnas expandidas, sin cromo de acordeón.
   Anula los estilos globales de details/summary (tarjetas de las FAQ). */
.foot-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; }
.foot-col { background: none; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; margin: 0; overflow: visible; }
.foot-col > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  list-style: none; cursor: pointer; padding: 15px 2px;
  font-size: inherit; font-weight: inherit;
  -webkit-tap-highlight-color: transparent;
}
.foot-col > summary::-webkit-details-marker { display: none; }
.foot-col > summary::after {
  content: ''; flex: none; width: 8px; height: 8px; margin-right: 3px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.foot-col[open] > summary::after { transform: rotate(-135deg); }
.foot-col-body { padding: 0 2px 14px; }
.foot-col b { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-cap); margin: 0; }
.foot-col-body b.sub { margin-top: 18px; }
.foot-col a { display: block; text-decoration: none; font-size: 14.5px; color: var(--ink-cap); padding: 9px 2px; }
.foot-col a:hover { color: var(--ink-1); }
/* En móvil el QR no sirve (ya estás en el móvil): fuera, y botones de tienda en fila */
@media (max-width: 900px) {
  /* Footer móvil: bloque a ancho completo (centrado real), un punto más grande */
  footer .wrap { padding-left: 14px; padding-right: 14px; text-align: center; }
  .foot-grid { display: block; } /* deja de encoger los hijos a la izquierda */
  .foot-brand .foot-slogan, .foot-brand > p { margin-left: auto; margin-right: auto; }
  .foot-qr { display: none; }
  .foot-dl { text-align: center; margin-bottom: 28px; } /* más aire con el bloque de idioma */
  .foot-brand .foot-dl-label { margin-left: auto; margin-right: auto; } /* centrar el label (tiene max-width heredado) */
  .foot-dl-row { gap: 12px; justify-content: center; }
  .foot-stores { flex-direction: row; flex-wrap: wrap; gap: 12px; justify-content: center; }
  .store-btn { flex: 0 0 auto; justify-content: center; padding: 12px 20px; min-width: 0; }
  .store-btn svg { width: 18px; height: 18px; }
  .store-btn i { font-size: 8.5px; }
  .store-btn b { font-size: 13px; }
  .foot-brand .foot-quick { display: none; } /* ahora es acordeón */
  .foot-lang { justify-content: center; }
  .foot-currency { justify-content: center; }
  .foot-cols { column-gap: 16px; margin-top: 10px; }
  .foot-col > summary { justify-content: center; gap: 8px; padding: 17px 4px; }
  .foot-col > summary b { font-size: 13px; }
  .foot-col a { font-size: 15.5px; padding: 11px 4px; }
  .foot-col-body { text-align: center; }
  footer .foot-base { justify-content: center; text-align: center; }
  footer .foot-base .socials, footer .foot-base .foot-legal { display: none; } /* ahora en acordeones */
}
/* En escritorio: marca + 5 columnas expandidas en una fila (sin acordeón) */
@media (min-width: 901px) {
  .foot-grid { flex-wrap: nowrap; align-items: flex-start; gap: clamp(28px, 3.5vw, 64px); }
  .foot-cols { display: flex; flex: 1; flex-wrap: nowrap; justify-content: space-between; gap: clamp(16px, 2.2vw, 40px); }
  .foot-col-mobile { display: none; } /* acordeones solo-móvil (accesos, redes, legales viven arriba/base en escritorio) */
  .foot-col { min-width: 0; border-top: 0; }
  .foot-col > summary { display: block; padding: 0; cursor: default; pointer-events: none; }
  .foot-col > summary::after { display: none; }
  .foot-col > summary b { margin-bottom: 12px; }
  .foot-col-body { display: block !important; padding: 0; }
  .foot-col::details-content { content-visibility: visible; } /* Chrome 128+: <details> cerrado oculta el contenido con content-visibility */
  .foot-col-body b.sub { margin-top: 20px; }
  .foot-col a { font-size: 13.5px; padding: 0; margin-bottom: 9px; }
  /* copyright | legales | redes: agrupados y centrados, con separador entre cada uno */
  footer .foot-base { justify-content: center; gap: 0; row-gap: 8px; }
  .foot-base .foot-legal, .foot-base .socials { border-left: 1px solid var(--line-1); margin-left: 22px; padding-left: 22px; }
}
/* 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: 11.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: #0E6F63; 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, .6); 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 móvil: dock inferior estilo app + hojas ============ */
/* Dock y hojas se inyectan como bloque propio antes de </body> (fuera del <nav>,
   cuyo backdrop-filter crearía un contenedor para position:fixed). Solo ≤900px. */
.nav-lang-toggle { display: none; }
.nav-currency-toggle { display: none; }
.dock, .sheet, .sheet-veil { display: none; }

/* Globito de chat: escríbele a SofIA por WhatsApp (todas las vistas).
   Discreto: mismo cristal translúcido que el menú, icono de chat en azul. */
.sofia-fab {
  position: fixed; z-index: 66; right: 22px; bottom: 22px;
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-panel);
  background: color-mix(in srgb, var(--bg-panel) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--line-2); color: #25D366;
  box-shadow: 0 8px 24px -8px rgba(24,20,10,.22);
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.sofia-fab svg { width: 25px; height: 25px; }
.sofia-fab:hover { transform: translateY(-2px) scale(1.04); }
.sofia-fab:active { transform: scale(.94); }
/* Botón "Habla con SofIA" del popup de salida */
.ep-sofia { display: inline-flex; align-items: center; gap: 8px; }
.ep-sofia svg { width: 18px; height: 18px; color: #25D366; }

@media (max-width: 900px) {
  /* Barra superior en móvil: logo · globo de idioma · Empieza gratis */
  .nav-actions .entrar { display: none; }
  .nav-lang-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%; color: var(--ink-2);
    -webkit-tap-highlight-color: transparent;
  }
  .nav-lang-toggle svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5; fill: none; }
  .nav-lang-toggle:active { background: var(--line-2); }
  .nav-currency-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%; color: var(--ink-2);
    font-size: 15px; font-weight: 700; border: 0; background: none; padding: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-currency-toggle:active { background: var(--line-2); }

  /* Hueco inferior para que footer/contenido no queden tapados por el dock */
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }

  /* ---- Dock flotante ---- */
  .dock {
    display: flex; position: fixed; left: 12px; right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 70;
    background: var(--bg-panel); /* fallback si no hay color-mix */
    background: color-mix(in srgb, var(--bg-panel) 76%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border: 0; border-radius: 20px; box-shadow: 0 10px 34px rgba(24,20,10,.16);
    padding: 6px 4px; transform: scale(1);
    transition: background .4s var(--ease), padding .35s var(--ease), box-shadow .4s var(--ease), transform .32s var(--ease);
  }
  /* Contorno del dock dibujado en SVG: pista gris + relleno azul que avanza
     con el scroll (0 arriba → anillo completo al llegar al footer). 1px, azul. */
  .dock-progress { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .dock-progress rect { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
  .dock-progress .dp-track { stroke: var(--line-2); }
  .dock-progress .dp-fill { stroke: var(--primary); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 2px rgba(37,99,235,.75)) drop-shadow(0 0 5px rgba(37,99,235,.45)); transition: stroke-dashoffset .12s linear; }
  .dock-item { position: relative; }
  .dock-item {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 7px 1px 5px; border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: -.01em;
    color: var(--ink-3); text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .dock-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dock-item svg { width: 24px; height: 24px; }
  .dock-item .di-line { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .dock-item .di-solid { display: none; fill: currentColor; }
  .dock-item.on .di-line, .dock-item[aria-expanded="true"] .di-line { display: none; }
  .dock-item.on .di-solid, .dock-item[aria-expanded="true"] .di-solid { display: block; }
  /* Item activo estilo Instagram: píldora clara (crema, como el menú de arriba) + icono relleno */
  .dock-item > svg, .dock-item > span { position: relative; z-index: 1; }
  .dock-item { transition: color .22s var(--ease); }
  .dock-item::before {
    content: ""; position: absolute; inset: 3px 4px; border-radius: 13px;
    background: rgb(251,249,245); box-shadow: 0 2px 7px rgba(24,20,10,.14);
    z-index: 0; opacity: 0; transform: scale(.7); pointer-events: none;
    transition: opacity .26s var(--ease), transform .26s var(--ease);
  }
  .dock-item.on, .dock-item[aria-expanded="true"] { color: var(--ink-1); }
  .dock-item.on::before, .dock-item[aria-expanded="true"]::before { opacity: 1; transform: scale(1); }
  .dock-item:active { transform: scale(.94); }

  /* Al completar el hilo (llegar al footer) el dock se vuelve banner CTA oscuro */
  .dock-cta { display: none; }
  .dock.is-cta {
    background: radial-gradient(130% 130% at 50% -20%, #1c2338 0%, #13151f 46%, #0d0e14 100%);
    padding: 10px; box-shadow: 0 14px 40px -8px rgba(37,99,235,.5);
  }
  .dock.is-cta .dock-item, .dock.is-cta .dock-progress { display: none; }
  .dock.is-cta .dock-cta { display: flex; flex-direction: column; gap: 8px; width: 100%; animation: dockCtaIn .38s var(--ease) both; }
  @keyframes dockCtaIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

  /* Scroll estilo Instagram: al bajar, la barra de arriba se oculta y el dock se achica;
     al subir o al parar, ambos vuelven a su tamaño. */
  nav { transform: translateY(0); transition: transform .3s var(--ease); }
  body.chrome-hidden nav { transform: translateY(-100%); }
  body.chrome-hidden .dock:not(.is-cta) { transform: scale(.84); transform-origin: bottom center; }

  /* FAB de SofIA: encima del dock en móvil; se aparta cuando el dock es banner CTA */
  .sofia-fab { right: 14px; bottom: calc(86px + env(safe-area-inset-bottom)); }
  .dock.is-cta ~ .sofia-fab { opacity: 0; transform: scale(.6); pointer-events: none; }
  .dock-cta .btn { width: 100%; justify-content: center; padding: 12px 16px; font-size: 14px; font-weight: 600; border-radius: 12px; }
  .dock-cta .btn-light { background: #fff; color: var(--ink-1); border: 0; }
  .dock-cta .dock-google { display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.3); }
  .dock-cta .dock-google .g-ico { width: 18px; height: 18px; flex: none; }

  /* ---- Hojas (bottom sheets) ---- */
  .sheet-veil {
    display: block; position: fixed; inset: 0; z-index: 80;
    background: rgba(17,17,17,.4); opacity: 0; visibility: hidden;
    transition: opacity .22s var(--ease), visibility 0s linear .22s;
  }
  .sheet-veil.open { opacity: 1; visibility: visible; transition-delay: 0s; }
  .sheet {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 81;
    background: var(--bg-app); border-radius: 22px 22px 0 0;
    box-shadow: 0 -12px 42px rgba(24,20,10,.2);
    padding: 6px 22px calc(22px + env(safe-area-inset-bottom));
    max-height: 84vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateY(103%); transition: transform .28s var(--ease);
  }
  .sheet.open { transform: none; }
  .sheet-grip { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line-1); margin: 8px auto 6px; }
  .sheet-close {
    position: absolute; top: 12px; right: 14px; z-index: 2;
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: var(--line-2); color: var(--ink-2);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .sheet-close svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
  .sheet-close:active { background: var(--line-1); }
  .sheet h3 { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-cap); margin: 14px 2px 2px; }
  .sheet > a { display: block; padding: 13px 2px; font-size: 16px; font-weight: 500; color: var(--ink-1); text-decoration: none; border-bottom: 1px solid var(--line-2); }
  .sheet > a.on { color: var(--primary); font-weight: 600; }
  .sheet > a.sheet-all { color: var(--primary); font-weight: 600; border-bottom: 0; }
  .sheet .sheet-cta { display: flex; gap: 10px; margin-top: 16px; }
  .sheet .sheet-cta .btn { flex: 1; justify-content: center; }
  body.sheet-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-drop, .has-menu .chev, .sheet, .sheet-veil, .dock-progress .dp-fill, .dock, nav, .dock-item, .dock-item::before { transition: none !important; }
  .dock.is-cta .dock-cta { animation: none !important; }
}

/* ============ 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-cap); }
.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: underline; text-underline-offset: 2px; }
.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-cap); }
.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-cap); 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-cap); }

.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-cap); }
.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-cap); }

/* ── 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-cap); 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); }
/* Recomendador: bloque «te vendría bien sumar» en el resultado */
.fx-planres .pr-sugg { background: var(--bg-subtle); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 16px; }
.fx-planres .pr-sugg-h { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.fx-planres .pr-sugg p { font-size: 13.5px; color: var(--ink-1); margin: 0; line-height: 1.5; }
.fx-planres .pr-sugg p span { color: var(--ink-3); }
.fx-planres .pr-sugg a { color: var(--primary); font-weight: 600; }

/* ── Estimador de precio (data-fx="price") ── */
.est { max-width: 720px; 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; }
.est-group { margin-bottom: 20px; }
.est-group:last-of-type { margin-bottom: 0; }
.est-glabel { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.est-seg { display: flex; gap: 8px; flex-wrap: wrap; }
.est-seg button { flex: 1 1 150px; font-family: inherit; color: var(--ink-1); cursor: pointer; border: 1px solid var(--line-1); background: var(--bg-panel); border-radius: var(--r-md); padding: 10px 13px; text-align: left; transition: border-color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease); }
.est-seg button b { display: block; font-size: 14.5px; }
.est-seg button > span { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.est-seg button .p { color: var(--primary); font-weight: 700; }
.est-seg button.on { border-color: var(--primary); background: rgba(37, 99, 235, .05); box-shadow: var(--shadow-2); }
.est-seg-sm button { flex: 1 1 auto; text-align: center; padding: 8px 10px; }
.est-seg-sm button b { font-size: 13.5px; }
.est-seg-sm button > span.p { display: inline; margin-top: 0; margin-left: 4px; }
.est-seg-mode button { flex: 1 1 0; text-align: center; padding: 11px 14px; }
.est-seg-mode button b { font-size: 15px; }
/* Enlace "Te ayudamos a elegir plan" + popup del quiz ¿qué plan me toca? */
.plan-help { font-weight: 600; color: var(--primary); text-decoration: none; }
.plan-help:hover { text-decoration: underline; }
.plan-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.plan-modal[hidden] { display: none; }
.plan-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 15, 25, .5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.plan-modal-box { position: relative; z-index: 1; width: 100%; max-width: 720px; max-height: 90vh; overflow: auto; background: var(--bg-app); border: 1px solid var(--line-1); border-radius: var(--r-xl); box-shadow: var(--shadow-pop); padding: 30px 28px 34px; animation: planModalIn .22s var(--ease); }
.plan-modal-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-1); background: var(--bg-panel); color: var(--ink-2); font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.plan-modal-x:hover { color: var(--ink-1); border-color: var(--line-strong); }
@keyframes planModalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .plan-modal-box { animation: none; } }
.est-evrow { padding: 2px 0 14px; margin-bottom: 8px; border-bottom: 1px solid var(--line-2); }
.est-evrow .n { display: block; font-size: 14px; margin-bottom: 8px; }
.est-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.est-chip { font-family: inherit; cursor: pointer; border: 1px solid var(--line-1); background: var(--bg-panel); border-radius: var(--r-pill); padding: 8px 13px; font-size: 13.5px; font-weight: 600; color: var(--ink-1); display: inline-flex; align-items: center; gap: 8px; transition: border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease); }
.est-chip .c { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.est-chip::before { content: "+"; font-weight: 700; color: var(--ink-4); }
.est-chip.on { border-color: var(--primary); background: rgba(37, 99, 235, .06); color: var(--primary); }
.est-chip.on::before { content: "✓"; color: var(--primary); }
.est-chip.on .c { color: var(--primary); }
.est-rows { display: flex; flex-direction: column; }
.est-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-2); }
.est-row:first-child { border-top: 0; }
.est-row .n { flex: 1 1 auto; min-width: 0; font-size: 14px; }
.est-row .n small { color: var(--ink-3); font-weight: 500; }
.est-stepper { flex: none; display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line-1); border-radius: var(--r-pill); background: var(--bg-panel); }
.est-stepper button { width: 30px; height: 30px; border: 0; background: none; cursor: pointer; font-size: 17px; line-height: 1; color: var(--primary); font-family: inherit; border-radius: 50%; }
.est-stepper button:disabled { color: var(--ink-4); cursor: default; }
.est-stepper .q { min-width: 24px; text-align: center; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.est-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-1); }
.est-total-label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.est-total { display: block; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink-1); }
.est-total small { font-size: 14px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.est-first3 { display: block; font-size: 12.5px; color: var(--success-ink); font-weight: 600; margin-top: 3px; }
.est-foot .btn { padding: 12px 22px; }
/* Estimador · grupos recogidos (Módulos / Adicionales) con botón + que despliega */
.est-coll { border: 1px solid var(--line-2); border-radius: var(--r-md); }
.est-gtoggle { display: flex; align-items: center; gap: 8px; width: 100%; font-family: inherit; cursor: pointer; background: none; border: 0; padding: 14px 16px; text-align: left; color: var(--ink-1); border-radius: var(--r-md); }
.est-gtoggle .est-glabel { margin-bottom: 0; }
.est-gsum { font-size: 12px; font-weight: 700; color: var(--primary); letter-spacing: 0; text-transform: none; }
.est-plus { margin-left: auto; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-1); display: inline-flex; align-items: center; justify-content: center; color: var(--primary); transition: border-color .16s var(--ease), background .16s var(--ease); }
.est-plus::before { content: "+"; font-size: 18px; line-height: 1; font-weight: 600; }
.est-gtoggle:hover .est-plus { border-color: var(--primary); background: rgba(37, 99, 235, .06); }
.est-gtoggle[aria-expanded="true"] .est-plus::before { content: "−"; }
.est-gbody { padding: 0 16px 16px; }
/* Estimador · precio total con formato promo (igual que las tarjetas de plan) */
.est-priceblock { display: flex; flex-direction: column; align-items: flex-start; }
.est-was { font-size: 13.5px; color: var(--ink-3); min-height: 18px; margin-top: 2px; }
.est-was s { text-decoration-color: var(--danger-ink); }
.est-price { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink-1); }
.est-price small { font-size: 14px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.est-save { display: inline-flex; align-self: flex-start; margin-top: 8px; background: var(--success-bg); color: var(--success-ink); border-radius: var(--r-pill); font-size: 12px; font-weight: 700; padding: 4px 12px; }
.est-after { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
@media (max-width: 560px) {
  .est-foot { flex-direction: column; align-items: stretch; }
  .est-foot .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .est-seg button, .est-chip, .est-stepper button { transition: none; }
}

@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);
  /* crece hacia dentro: escalando desde el centro, en móvil el sello sacaba
     5 px por la derecha y la página ganaba scroll horizontal */
  transform-origin: right center;
  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; } }

/* ============ Cookies centradas a la altura del aviso de idioma ============ */
/* (26 jul 2026) Mismo sitio y anchura que .lang-banner; «Accept all» dominante
   a fila completa; Decline y Configurar debajo, al espacio justo. Mientras el
   aviso de idioma está abierto, las cookies esperan ocultas (html.hb-lang-open). */
body #cookie-banner {
  left: 50%; top: 50%; bottom: auto; right: auto;
  transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 32px));
}
body #cookie-banner .cb-actions { flex-wrap: wrap; }
body #cookie-banner .cb-accept {
  flex: 1 1 100%; order: -1;
  padding: 14px 16px; font-size: 15px; font-weight: 700;
}
body #cookie-banner .cb-reject { flex: 0 1 auto; }
html.hb-lang-open #cookie-banner { opacity: 0; pointer-events: none; }

/* ============================================================
   LANDINGS DE OFICIO (fotografía, flores, catering, AV, DJ, fincas)
   Piezas compartidas por las 12 páginas de gremio (EN+ES). Antes vivían
   duplicadas en el <style> de cada página; aquí son una sola fuente.
   ============================================================ */

/* Pastilla de gremio del hero: icono del sprite + nombre del oficio */
.oficio-tag { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 18px; }
.oficio-tag svg {
  width: 13px; height: 13px; color: currentColor; stroke: currentColor;
  stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none;
}

/* Aviso de SofIA (el repaso de 48 h antes, en la voz del oficio) */
.sofia-alert { max-width: 460px; margin: 0 auto; padding: 18px 20px; }
.sofia-alert .a-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sofia-alert .a-body { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.sofia-alert .a-body b { color: var(--ink-1); }

/* ── Tira de etapas del oficio (calco de la vista Tareas de la app) ──
   Estaba en el <style> de tareas/tasks; centralizada para reutilizarla. */
.stage-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1020px; margin: 0 auto; }
.stage-card { padding: 24px 26px; }
.stage-card .microlabel { display: block; margin-bottom: 8px; }
.stage-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.stage-card p { font-size: 14.5px; color: var(--ink-2); }
.stage-card .progress { margin: 14px 0 6px; }
.stage-tasks { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 2px; }
.stage-tasks .check-item { font-size: 12.5px; }
/* Al entrar en pantalla: la barra se llena y las tareas aparecen encadenadas. */
.stage-strip .p-fill { width: var(--pw, 0%); }
.js .stage-strip .p-fill { width: 0; transition: width 1.05s var(--ease) .25s; }
.js .stage-strip.in .p-fill { width: var(--pw, 0%); }
.js .stage-strip .check-item { opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .stage-strip.in .check-item { opacity: 1; transform: none; }
.js .stage-strip.in .stage-card:nth-child(1) .check-item:nth-child(1) { transition-delay: .30s; }
.js .stage-strip.in .stage-card:nth-child(1) .check-item:nth-child(2) { transition-delay: .40s; }
.js .stage-strip.in .stage-card:nth-child(1) .check-item:nth-child(3) { transition-delay: .50s; }
.js .stage-strip.in .stage-card:nth-child(2) .check-item:nth-child(1) { transition-delay: .40s; }
.js .stage-strip.in .stage-card:nth-child(2) .check-item:nth-child(2) { transition-delay: .50s; }
.js .stage-strip.in .stage-card:nth-child(2) .check-item:nth-child(3) { transition-delay: .60s; }
.js .stage-strip.in .stage-card:nth-child(3) .check-item:nth-child(1) { transition-delay: .50s; }
.js .stage-strip.in .stage-card:nth-child(3) .check-item:nth-child(2) { transition-delay: .60s; }
.js .stage-strip.in .stage-card:nth-child(3) .check-item:nth-child(3) { transition-delay: .70s; }
.js .stage-strip.in .check-item.done .box { animation: stagePop .45s var(--ease) both; }
@keyframes stagePop { 0% { transform: scale(.2); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@media (max-width: 900px) { .stage-strip { grid-template-columns: 1fr; } }

/* ── Checklist vivo: el visitante marca y la barra sube de verdad ── */
.stage-strip[data-live-check] .check-item {
  cursor: pointer; border-radius: var(--r-xs); padding: 3px 6px; margin: -3px -6px;
  transition: background .18s var(--ease);
}
.stage-strip[data-live-check] .check-item:hover { background: var(--bg-subtle); }
.stage-strip[data-live-check] .check-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Halo azul de «esto se pulsa» sobre la primera casilla pendiente (regla del sitio) */
.stage-strip[data-live-check] .check-item.lc-cue .box { position: relative; }
.stage-strip[data-live-check] .check-item.lc-cue .box::before {
  content: ""; position: absolute; inset: -4px; border-radius: 7px;
  border: 2px solid var(--primary); opacity: 0; animation: lcHalo 2.1s var(--ease) infinite;
}
@keyframes lcHalo {
  0% { transform: scale(.85); opacity: .85; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
.lc-hint { color: var(--primary); font-weight: 600; font-size: 13.5px; text-align: center; margin-top: 20px; }

/* ── Escena «oficio»: del WhatsApp suelto a la tarea cerrada ── */
.fxo-wa .wa-head { border-radius: var(--r-md) var(--r-md) 0 0; }
.fxo-wa { transition: opacity .3s var(--ease), transform .3s var(--ease); }
.fxo-wa.fxo-fade { opacity: 0; transform: translateY(-6px); }
.fxo-task { margin-top: 14px; box-shadow: var(--shadow-pop); }
.fxo-task .taskhub-head .fx-chips { margin-top: 10px; }
.fxo-chips .pill { opacity: 0; transform: translateY(4px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.fxo-chips .pill.show { opacity: 1; transform: none; }
.fxo-pay { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) {
  .fxo-wa, .fxo-chips .pill { transition: none !important; }
  .fxo-chips .pill { opacity: 1 !important; transform: none !important; }
  .stage-strip[data-live-check] .check-item.lc-cue .box::before { animation: none; opacity: .6; }
}

/* ── Mocks del producto propios de cada oficio ──
   Antes vivían en el <style> de su landing; ahora los comparten las 12. */
.file-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px; border-top: 1px solid var(--line-2);
  font-size: 12px; color: var(--ink-2);
}
.file-row .fic {
  width: 26px; height: 26px; border-radius: var(--r-xs); flex: none;
  background: var(--tag-wedding-bg); color: var(--tag-wedding-ink);
  display: grid; place-items: center; font-size: 10px; font-weight: 700;
}
.count-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 460px; margin: 0 auto 12px; }
.count-cards .kpi { text-align: center; }
@media (max-width: 560px) { .count-cards { grid-template-columns: 1fr; } }
/* Listas del oficio: repertorio (DJ), franjas de acceso (finca), rider (AV) */
.joblist { max-width: 460px; margin: 0 auto; }
.joblist .jl-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 16px 16px 10px; border-bottom: 1px solid var(--line-2);
}
.joblist .jl-head b { font-size: 14px; }
.jl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line-2); }
.jl-row:last-child { border-bottom: none; }
.jl-row b { font-size: 12.5px; display: block; }
.jl-row .d { font-size: 10.5px; color: var(--ink-cap); }
.jl-row .h { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
/* Reloj que avanza en los titulares ("Son las 23:40. Sigues despierta.") */
.liveclock { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ============================================================
   PIEZAS COMPARTIDAS que vivían solo en el <style> de una página
   (.steps de planners, .bridge de planners, .change-grid y
   .profile-mock de proveedores). Las landings de oficio las usan
   también, así que pasan aquí: una definición, todas las páginas.
   ============================================================ */

/* Cómo funciona: checklist vertical que se completa sola (número → check) */
.steps { display: flex; flex-direction: column; gap: 14px; max-width: 620px; margin: 0 auto; }
.step-card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 20px; padding: 20px 26px;
  transition: border-color .4s var(--ease), background .4s var(--ease), box-shadow .3s var(--ease);
}
.step-card:hover { box-shadow: var(--shadow-pop); }
.step-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit; opacity: 0; transition: opacity .5s ease;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 20%),
    rgba(37, 99, 235, .16), rgba(37, 99, 235, .05) 45%, transparent 70%);
}
.step-card.is-lit::before { opacity: 1; }
.step-card > * { position: relative; z-index: 1; }
.step-mark { flex: none; position: relative; width: 28px; height: 28px; display: grid; place-items: center; }
.step-outline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.step-outline rect { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-dasharray: 100; stroke-dashoffset: 0; }
.js .steps[data-checklist] .step-card .step-outline rect { stroke-dashoffset: 100; }
.step-num {
  font-size: 13px; font-weight: 700; line-height: 1; color: var(--primary);
  font-variant-numeric: tabular-nums;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.step-check { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--ink-3); opacity: 0; transform: scale(.4); transition: opacity .3s var(--ease), transform .4s var(--ease); }
.step-check path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.step-body b { display: block; font-size: 16px; margin-bottom: 4px; transition: color .3s var(--ease); }
.step-body p { font-size: 14.5px; color: var(--ink-2); }
.js .step-card.drawing .step-outline rect { transition: stroke-dashoffset .85s var(--ease); stroke-dashoffset: 0; }
.js .step-card.done { border-color: var(--success); }
.js .steps[data-checklist] .step-card.done .step-outline rect { stroke: var(--line-strong); stroke-width: 2; stroke-dashoffset: 0; transition: stroke .3s var(--ease), stroke-width .3s var(--ease); }
.js .step-card.done .step-num { opacity: 0; transform: scale(.4); }
.js .step-card.done .step-check { opacity: 1; transform: scale(1); }
.js .step-card.done .step-body b { color: var(--ink-3); }
.js .steps[data-checklist] .step-card.drawn .step-outline rect { stroke-dashoffset: 0; }
@media (max-width: 600px) {
  .step-card { padding: 16px 18px; gap: 12px; }
  .step-mark { width: 26px; height: 26px; }
}

/* Puentes: módulo del oficio, SofIA, VeriFactu */
.bridge { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bridge-card {
  border-radius: var(--r-xl); padding: clamp(28px, 3.5vw, 44px);
  border: 1px solid var(--line-1); background: var(--bg-panel);
}
.bridge-card.violet { background: var(--violet-bg); border-color: transparent; }
.bridge-card.fiscal { background: var(--success-bg); border-color: transparent; }
.bridge-card h3 { font-size: 1.3rem; margin-bottom: 10px; }
.bridge-card p { font-size: 15px; color: var(--ink-2); margin-bottom: 20px; max-width: 44ch; }
@media (max-width: 900px) { .bridge { grid-template-columns: 1fr; } }

/* Lo que cambia: de X a Y (con el tachón rojo que se dibuja al entrar) */
.change-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 900px; margin: 40px auto 0; }
.change-card {
  padding: 22px 24px; display: flex; align-items: flex-start; gap: 15px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.change-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); border-color: var(--line-strong); }
.ch-ic {
  width: 40px; height: 40px; border-radius: var(--r-md); flex: none;
  background: var(--bg-subtle); display: grid; place-items: center;
  transition: background .25s var(--ease);
}
.change-card:hover .ch-ic { background: var(--danger-bg); }
.ch-ic svg {
  width: 21px; height: 21px; color: var(--primary); stroke: var(--primary);
  stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round;
  transition: color .25s var(--ease), stroke .25s var(--ease);
}
.change-card:hover .ch-ic svg { color: var(--danger); stroke: var(--danger); }
.ch-body { flex: 1; min-width: 0; }
.ch-flow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 8px; }
.ch-before {
  font-size: 13px; color: var(--ink-cap); position: relative;
  text-decoration: line-through; text-decoration-color: var(--danger); text-decoration-thickness: 2px;
}
.js .ch-before { text-decoration: none; }
.js .ch-before::after {
  content: ""; position: absolute; left: -1px; right: -1px; top: 54%;
  height: 2px; border-radius: 2px; background: var(--danger);
  transform: scaleX(0); transform-origin: left;
}
.js .change-grid.in .ch-before::after { animation: chStrike .45s var(--ease) .3s forwards; }
@keyframes chStrike { to { transform: scaleX(1); } }
.ch-arrow { color: var(--ink-3); font-size: 14px; transition: transform .25s var(--ease); }
.change-card:hover .ch-arrow { transform: translateX(3px); }
.ch-after { font-size: 16.5px; font-weight: 700; color: var(--ink-1); letter-spacing: -0.01em; }
.change-card p { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.js .change-grid.reveal { opacity: 1; transform: none; }
.js .change-grid .change-card { opacity: 0; }
.js .change-grid.in .change-card { animation: chIn .55s var(--ease) forwards; }
.js .change-grid.in .change-card:nth-child(2) { animation-delay: .08s; }
.js .change-grid.in .change-card:nth-child(3) { animation-delay: .16s; }
.js .change-grid.in .change-card:nth-child(4) { animation-delay: .24s; }
@keyframes chIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.change-close {
  max-width: 900px; margin: 14px auto 0; padding: 16px 22px;
  display: flex; gap: 12px; align-items: center;
  background: var(--success-bg); border-radius: var(--r-lg);
  font-size: 14px; color: var(--success-ink); font-weight: 500;
}
.change-close .cc-ic { font-size: 15px; font-weight: 800; flex: none; }
@media (max-width: 900px) { .change-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .js .change-grid .change-card { opacity: 1 !important; animation: none !important; }
  .change-card:hover { transform: none; }
  .js .ch-before::after { transform: scaleX(1); animation: none !important; }
}

/* Perfil público del proveedor en el directorio */
.profile-mock { max-width: 480px; margin: 0 auto; overflow: hidden; }
.profile-head { padding: 22px 22px 18px; display: flex; align-items: center; gap: 14px; }
.profile-head .plogo {
  width: 52px; height: 52px; border-radius: var(--r-md); flex: none;
  background: var(--success-bg); color: var(--success-ink);
  display: grid; place-items: center; font-size: 20px; font-weight: 700;
}
.profile-head h5 { font-size: 16px; display: flex; align-items: center; gap: 7px; }
.profile-head .check {
  width: 17px; height: 17px; border-radius: 50%; background: var(--primary); color: #fff;
  display: inline-grid; place-items: center; font-size: 9px; font-weight: 800; flex: none;
}
.profile-head .meta { font-size: 12px; color: var(--ink-cap); margin-top: 3px; }
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 0 22px; }
.pgrid .ph { aspect-ratio: 1; border-radius: var(--r-sm); display: grid; place-items: center; font-size: 22px; }
.pgrid img.ph { object-fit: cover; width: 100%; height: 100%; }
.profile-contact {
  display: flex; gap: 16px; padding: 16px 22px 20px; margin-top: 14px;
  border-top: 1px solid var(--line-2); font-size: 11.5px; color: var(--ink-2); flex-wrap: wrap;
}