/* ══════════════════════════ TOKENS ══════════════════════════ */
:root {
  --indigo: #4f46e5;
  --indigo-dark: #4338ca;
  --violet: #7c3aed;
  --cyan: #06b6d4;
  --emerald: #10b981;
  --amber: #f59e0b;
  --red: #ef4444;

  --ink-900: #0f172a;
  --ink-700: #334155;
  --ink-500: #64748b;
  --ink-300: #cbd5e1;
  --ink-100: #f1f5f9;
  --ink-50:  #f8fafc;
  --white: #ffffff;

  --bg: var(--white);
  --bg-alt: var(--ink-50);
  --text: var(--ink-900);
  --text-soft: var(--ink-700);
  --text-mute: var(--ink-500);
  --border: #e2e8f0;

  --gradient-brand: linear-gradient(135deg, var(--indigo) 0%, var(--violet) 55%, var(--cyan) 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(79,70,229,.08), rgba(124,58,237,.08));

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --shadow-md: 0 8px 24px rgba(15,23,42,.08);
  --shadow-lg: 0 24px 60px rgba(15,23,42,.14);
  --shadow-brand: 0 12px 32px rgba(79,70,229,.28);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  --container: 1180px;
}

/* ══════════════════════════ RESET / BASE ══════════════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.05rem; }
p { color: var(--text-soft); }

.text-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ══════════════════════════ BUTTONS ══════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: .95rem;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn--sm { padding: 9px 16px; font-size: .85rem; }
.btn--lg { padding: 15px 28px; font-size: 1rem; }
.btn--primary {
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.btn--primary:hover { box-shadow: 0 16px 40px rgba(79,70,229,.38); }
.btn--ghost {
  background: var(--white);
  color: var(--indigo);
  border: 1.5px solid var(--border);
}
.btn--ghost:hover { border-color: var(--indigo); }
.btn--ghost-light {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.35);
}
.btn--ghost-light:hover { background: rgba(255,255,255,.2); }

/* ══════════════════════════ NAV ══════════════════════════ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.nav.is-scrolled { border-color: var(--border); box-shadow: var(--shadow-sm); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.nav__brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; }
.nav__links { display: flex; gap: 28px; }
.nav__links a { font-size: .92rem; font-weight: 600; color: var(--text-soft); transition: color .15s ease; }
.nav__links a:hover { color: var(--indigo); }
.nav__actions { display: flex; align-items: center; gap: 14px; }
.nav__burger { display: none; flex-direction: column; gap: 4px; width: 26px; }
.nav__burger span { display: block; height: 2px; background: var(--text); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }

/* ══════════════════════════ HERO ══════════════════════════ */
.hero {
  position: relative;
  padding: 88px 0 110px;
  overflow: hidden;
}
.hero__blobs { position: absolute; inset: 0; z-index: 0; }
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .35;
}
.blob--1 { width: 480px; height: 480px; background: var(--indigo); top: -180px; right: -120px; animation: float-slow 14s ease-in-out infinite; }
.blob--2 { width: 380px; height: 380px; background: var(--cyan); bottom: -160px; left: -100px; animation: float-slow 18s ease-in-out infinite reverse; }
.blob--3 { width: 300px; height: 300px; background: var(--violet); top: 40%; left: 55%; animation: float-slow 16s ease-in-out infinite; }

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}
.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--indigo);
  background: var(--gradient-brand-soft);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 18px;
}
.hero__copy h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); margin-bottom: 20px; }
.hero__lead { font-size: 1.08rem; color: var(--text-soft); max-width: 540px; margin-bottom: 30px; }
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }
.hero__ctas--center { justify-content: center; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-soft);
  background: var(--ink-50);
  border: 1px solid var(--border);
  padding: 7px 13px;
  border-radius: var(--radius-full);
}

.hero__visual { position: relative; }
.browser-frame {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  background: var(--white);
}
.browser-frame__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--ink-100);
  border-bottom: 1px solid var(--border);
}
.browser-frame__bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-300); }
.browser-frame__bar span:nth-child(1) { background: #ff5f57; }
.browser-frame__bar span:nth-child(2) { background: #febc2e; }
.browser-frame__bar span:nth-child(3) { background: #28c840; }
.browser-frame__url {
  margin-left: 10px;
  font-size: .72rem;
  color: var(--text-mute);
  background: var(--white);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
}
.browser-frame img { width: 100%; height: auto; display: block; }
.browser-frame--float { animation: float-frame 6s ease-in-out infinite; }

/* Zoom affordance — cualquier captura dentro de un browser-frame se puede
   ampliar con un clic (ver lightbox más abajo). */
.browser-frame { position: relative; }
.browser-frame:has(img) { cursor: zoom-in; }
.browser-frame__zoom-hint {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15,23,42,.55);
  color: #fff;
  border-radius: var(--radius-full);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
  backdrop-filter: blur(2px);
}
.browser-frame:hover .browser-frame__zoom-hint { opacity: 1; transform: scale(1); }
.browser-frame__zoom-hint svg { width: 16px; height: 16px; }

/* ── Lightbox — ampliar cualquier captura de la plataforma ── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 5vw, 64px);
  background: rgba(10,12,20,.86);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__inner {
  position: relative;
  max-width: min(1400px, 100%);
  max-height: 100%;
  transform: scale(.96);
  transition: transform .22s ease;
}
.lightbox.is-open .lightbox__inner { transform: scale(1); }
.lightbox__inner img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 96px);
  width: auto;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 30px 90px rgba(0,0,0,.5);
  cursor: zoom-out;
  background: var(--white);
}
.lightbox__close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background .15s ease;
}
.lightbox__close:hover { background: rgba(255,255,255,.22); }
.lightbox__close svg { width: 18px; height: 18px; }
.lightbox__caption {
  position: absolute;
  left: 0;
  bottom: -36px;
  font-size: .82rem;
  color: rgba(255,255,255,.7);
}
@media (max-width: 640px) {
  .lightbox__close { top: -40px; }
  .lightbox__caption { bottom: -30px; font-size: .75rem; }
}

.floaty {
  position: absolute;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-full);
  padding: 10px 16px;
  font-size: .82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.floaty--card1 { top: -18px; left: -22px; animation: float-slow 7s ease-in-out infinite; }
.floaty--card2 { bottom: 10px; right: -26px; animation: float-slow 8s ease-in-out infinite reverse; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot--green { background: var(--emerald); }
.dot--indigo { background: var(--indigo); }

/* ══════════════════════════ SECTIONS shared ══════════════════════════ */
.section { padding: 96px 0; }
.section-head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.section-head h2 { margin: 12px 0 14px; }
.section-head--light h2 { color: #fff; }
.section-head--light p { color: rgba(255,255,255,.75); }
.section-tag {
  display: inline-block;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--indigo);
  background: var(--gradient-brand-soft);
  padding: 6px 14px;
  border-radius: var(--radius-full);
}
.section-tag--danger { color: var(--red); background: rgba(239,68,68,.08); }
.section-tag--light { color: #c7d2fe; background: rgba(255,255,255,.12); }

/* ══════════════════════════ PROBLEM / SOLUTION ══════════════════════════ */
.problem { background: var(--bg-alt); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.split__col h2 { margin: 10px 0 22px; font-size: 1.5rem; }
.check-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 14px;
  font-weight: 600;
  color: var(--text-soft);
  font-size: .96rem;
}
.check-list li::before {
  position: absolute; left: 0; top: 1px;
  font-weight: 900;
}
.check-list--x li::before { content: "✕"; color: var(--red); }
.check-list--check li::before { content: "✓"; color: var(--emerald); }

/* ══════════════════════════ PILARES / TABS ══════════════════════════ */
.tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 36px;
}
.tabs__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border);
  background: var(--white);
  font-weight: 700;
  font-size: .88rem;
  color: var(--text-soft);
  transition: all .18s ease;
}
.tabs__icon { font-size: 1rem; }
.tabs__btn:hover { border-color: var(--indigo); color: var(--indigo); }
.tabs__btn.is-active {
  background: var(--gradient-brand);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.tabs__panel {
  display: none;
  grid-template-columns: .85fr 1.15fr;
  gap: 48px;
  align-items: center;
}
.tabs__panel.is-active { display: grid; animation: fade-up .5s ease both; }
.tabs__panel-copy h3 { margin-bottom: 14px; }
.tabs__panel-copy p { margin-bottom: 20px; }
.feat-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: .93rem;
  color: var(--text-soft);
}
.feat-list li::before {
  content: "";
  position: absolute; left: 0; top: 7px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gradient-brand);
}

/* ══════════════════════════ BENTO FEATURES ══════════════════════════ */
.features { background: var(--bg-alt); }
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.bento__card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.bento__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: #c7d2fe;
}
.bento__icon { font-size: 1.6rem; display: block; margin-bottom: 12px; }
.bento__card h4 { margin-bottom: 6px; }
.bento__card p { font-size: .85rem; color: var(--text-mute); }

/* ══════════════════════════ SHOWCASE (dark) ══════════════════════════ */
.showcase {
  background: linear-gradient(180deg, #0f0c29 0%, #1a1445 55%, #24124a 100%);
  position: relative;
}
.showcase__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.showcase__item figcaption {
  margin-top: 16px;
  text-align: left;
}
.showcase__item figcaption h4 {
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  margin: 0 0 4px;
}
.showcase__item figcaption p {
  color: rgba(255,255,255,.6);
  font-size: .84rem;
  line-height: 1.5;
  margin: 0;
}
.showcase .browser-frame { border-color: rgba(255,255,255,.1); }

/* ── Clips cortos (tipo GIF) — ver marketing-site/assets/clips/README.md ── */
.clips { margin-top: 64px; padding-top: 56px; border-top: 1px solid rgba(255,255,255,.1); }
.clips__head { max-width: 560px; margin: 0 auto 32px; text-align: center; }
.clips__head h3 { color: #fff; font-size: 1.3rem; margin-bottom: 8px; }
.clips__head p { color: rgba(255,255,255,.65); font-size: .92rem; }
.clips__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.clip-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  background: #0b0920;
  box-shadow: var(--shadow-lg);
}
.clip-card__media { position: relative; aspect-ratio: 16 / 10; background: #0b0920; }
.clip-card__media video,
.clip-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.clip-card__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(2px);
  padding: 4px 9px;
  border-radius: var(--radius-full);
}
.clip-card__badge::before { content: "●"; color: var(--red); font-size: .5rem; }
.clip-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,12,20,.25);
  opacity: 1;
  transition: opacity .2s ease;
  pointer-events: none;
}
.clip-card__play svg {
  width: 44px; height: 44px;
  color: #fff;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));
}
.clip-card.is-playing .clip-card__play { opacity: 0; }
.clip-card__caption { padding: 14px 16px 18px; }
.clip-card__caption h4 { color: #fff; font-size: .92rem; margin-bottom: 4px; }
.clip-card__caption p { color: rgba(255,255,255,.6); font-size: .82rem; margin: 0; line-height: 1.5; }
@media (max-width: 900px) { .clips__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .clips__grid { grid-template-columns: 1fr; } }

/* ══════════════════════════ COMPARATIVA ══════════════════════════ */
.compare-table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border); }
.compare-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.compare-table th, .compare-table td {
  padding: 16px 20px;
  text-align: center;
  font-size: .9rem;
  border-bottom: 1px solid var(--border);
}
.compare-table thead th {
  background: var(--ink-50);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-mute);
}
.compare-table td:first-child, .compare-table th:first-child {
  text-align: left;
  font-weight: 700;
  color: var(--text);
}
.compare-table__sanus { background: var(--gradient-brand-soft); font-weight: 800; }
.compare-table thead .compare-table__sanus { background: var(--gradient-brand); color: #fff; }
.compare-table tbody tr:last-child td { border-bottom: none; }
.ok { color: var(--emerald); font-weight: 900; font-size: 1.1rem; }
.no { color: var(--ink-300); font-weight: 900; font-size: 1.1rem; }
.partial { font-size: .78rem; font-weight: 700; color: var(--amber); text-transform: uppercase; }
.compare-note { margin-top: 22px; text-align: center; color: var(--text-mute); font-size: .88rem; max-width: 640px; margin-inline: auto; }

/* ══════════════════════════ WHY ══════════════════════════ */
.why { background: var(--bg-alt); }
.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.why__card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 24px;
}
.why__num {
  display: inline-block;
  font-size: .8rem;
  font-weight: 900;
  color: var(--indigo);
  background: var(--gradient-brand-soft);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  margin-bottom: 14px;
}
.why__card h4 { margin-bottom: 8px; }
.why__card p { font-size: .9rem; }

/* ══════════════════════════ PLANES ══════════════════════════ */
.plans-group { margin-bottom: 44px; }
.plans-group:last-child { margin-bottom: 0; }
.plans-group__title { margin-bottom: 20px; font-size: 1.2rem; }
.plans-group__title span { color: var(--text-mute); font-weight: 600; font-size: .95rem; }
.plans-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.plan-card {
  position: relative;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px 22px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.plan-card--highlight { border-color: var(--indigo); box-shadow: var(--shadow-brand); }
.plan-card__badge {
  position: absolute; top: -12px; left: 22px;
  background: var(--gradient-brand);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: var(--radius-full);
}
.plan-card h4 { margin-bottom: 10px; }
.plan-card__price { font-size: 1.9rem; font-weight: 900; margin-bottom: 16px; }
.plan-card__price span { font-size: .85rem; font-weight: 600; color: var(--text-mute); }
.plan-card ul li { font-size: .85rem; color: var(--text-soft); font-weight: 600; margin-bottom: 8px; padding-left: 18px; position: relative; }
.plan-card ul li::before { content: "•"; color: var(--indigo); position: absolute; left: 0; }
.plan-card--enterprise { background: var(--ink-900); border-color: var(--ink-900); }
.plan-card--enterprise h4, .plan-card--enterprise .plan-card__price { color: #fff; }
.plan-card--enterprise ul li { color: rgba(255,255,255,.75); }
.plan-card--enterprise ul li::before { color: var(--cyan); }

/* ══════════════════════════ CTA BAND ══════════════════════════ */
.cta-band {
  position: relative;
  padding: 100px 0;
  background: var(--gradient-brand);
  overflow: hidden;
  text-align: center;
}
.cta-band__blobs { position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.15), transparent 45%), radial-gradient(circle at 80% 80%, rgba(255,255,255,.12), transparent 45%); }
.cta-band__inner { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; max-width: 640px; margin: 0 auto 14px; }
.cta-band p { color: rgba(255,255,255,.85); max-width: 520px; margin: 0 auto 30px; }

/* ══════════════════════════ FOOTER ══════════════════════════ */
.footer { background: var(--ink-900); color: rgba(255,255,255,.7); padding: 56px 0 24px; }
.footer__inner { display: grid; grid-template-columns: 1.2fr 2fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.footer__brand span { font-weight: 800; font-size: 1.1rem; color: #fff; }
.footer__brand p { flex-basis: 100%; font-size: .85rem; margin-top: 8px; color: rgba(255,255,255,.55); }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer__cols h5 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 14px; }
.footer__cols a { display: block; font-size: .88rem; margin-bottom: 10px; color: rgba(255,255,255,.6); transition: color .15s ease; }
.footer__cols a:hover { color: #fff; }
.footer__legal { padding-top: 20px; font-size: .78rem; color: rgba(255,255,255,.4); }

/* ══════════════════════════ SANI INTRO (tab IA) ══════════════════════════ */
.sani-intro {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.sani-intro__mascot { flex-shrink: 0; animation: float-frame 5s ease-in-out infinite; }
.sani-intro__bubble {
  position: relative;
  background: var(--ink-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sani-intro__bubble::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 22px;
  width: 12px;
  height: 12px;
  background: var(--ink-50);
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
}
.sani-intro__bubble strong { font-size: .92rem; color: var(--text); }
.sani-intro__bubble span { font-size: .85rem; color: var(--text-mute); }

/* ══════════════════════════ ACCIONES FLOTANTES ══════════════════════════
   Par "Agendar demo" + WhatsApp, mismo tratamiento visual (círculo 58px,
   sombra de color propio, tooltip al hover) para que se lean como un solo
   grupo de acciones rápidas fijo en la esquina, no dos widgets sueltos. */
.fab-stack {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.fab-btn {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform .18s ease, box-shadow .18s ease;
}
.fab-btn:hover { transform: translateY(-3px) scale(1.06); }
.fab-btn--demo {
  background: var(--gradient-brand);
  box-shadow: 0 10px 28px rgba(79,70,229,.4);
}
.fab-btn--demo:hover { box-shadow: 0 14px 34px rgba(79,70,229,.5); }
.fab-btn--wa {
  background: #25d366;
  box-shadow: 0 10px 28px rgba(37,211,102,.45);
}
.fab-btn--wa:hover { box-shadow: 0 14px 34px rgba(37,211,102,.55); }
.fab-btn--wa::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(37,211,102,.35);
  animation: wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse {
  0%   { transform: scale(.85); opacity: .9; }
  100% { transform: scale(1.35); opacity: 0; }
}
/* Tooltip — oculto por defecto, aparece a la izquierda del botón al hover
   (los botones viven pegados al borde derecho, así que el label solo
   tiene espacio para crecer hacia adentro de la página). */
.fab-btn__label {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap;
  background: var(--ink-900);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.fab-btn:hover .fab-btn__label,
.fab-btn:focus-visible .fab-btn__label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
@media (max-width: 640px) {
  /* En móvil no hay hover real — el tooltip nunca se vería, mejor no
     reservarle espacio ni animarlo. */
  .fab-btn__label { display: none; }
  .fab-stack { right: 16px; bottom: 16px; gap: 12px; }
  .fab-btn { width: 52px; height: 52px; }
}

/* ══════════════════════════ MODAL: AGENDAR DEMO ══════════════════════════ */
.demo-modal {
  position: fixed;
  inset: 0;
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 5vw, 40px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease;
}
.demo-modal.is-open { opacity: 1; visibility: visible; }
.demo-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,12,20,.6);
  backdrop-filter: blur(4px);
}
.demo-modal__inner {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 34px;
  transform: scale(.96) translateY(8px);
  transition: transform .22s ease;
}
.demo-modal.is-open .demo-modal__inner { transform: scale(1) translateY(0); }
.demo-modal__close {
  position: absolute;
  top: 18px; right: 18px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--ink-50);
  color: var(--text-mute);
  transition: background .15s ease, color .15s ease;
}
.demo-modal__close:hover { background: var(--ink-100); color: var(--text); }
.demo-modal__close svg { width: 16px; height: 16px; }
.demo-modal__head { margin-bottom: 22px; padding-right: 30px; }
.demo-modal__head h3 { margin: 10px 0 8px; font-size: 1.35rem; }
.demo-modal__head p { font-size: .9rem; color: var(--text-mute); }

.demo-form { display: flex; flex-direction: column; gap: 14px; }
.demo-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.demo-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.demo-form__field { display: flex; flex-direction: column; gap: 6px; }
.demo-form__field label { font-size: .82rem; font-weight: 700; color: var(--text-soft); }
.demo-form__field input,
.demo-form__field textarea {
  font: inherit;
  font-size: .92rem;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--ink-50);
  color: var(--text);
  transition: border-color .15s ease, background .15s ease;
  resize: vertical;
}
.demo-form__field input:focus,
.demo-form__field textarea:focus {
  outline: none;
  border-color: var(--indigo);
  background: var(--white);
}
.demo-form__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.demo-form__submit { width: 100%; }
.demo-form__submit:disabled { opacity: .65; cursor: not-allowed; transform: none; }
.demo-form__wa-alt { font-size: .85rem; font-weight: 700; color: var(--indigo); }
.demo-form__wa-alt:hover { text-decoration: underline; }
.demo-form__status {
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
  min-height: 1.2em;
}
.demo-form__status.is-error { color: var(--red); }
.demo-form__status.is-success { color: var(--emerald); }

@media (max-width: 560px) {
  .demo-form__row { grid-template-columns: 1fr; }
  .sani-intro { flex-direction: column; align-items: flex-start; }
  .sani-intro__bubble::before { display: none; }
}

/* ══════════════════════════ RESPONSIVE ══════════════════════════ */
@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { order: -1; }
  .split { grid-template-columns: 1fr; }
  .tabs__panel.is-active { grid-template-columns: 1fr; }
  .tabs__panel-shot { order: -1; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .showcase__grid { grid-template-columns: 1fr; }
  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .plans-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 680px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .nav.is-open .nav__links {
    display: flex;
    position: absolute;
    top: 68px; left: 0; right: 0;
    background: var(--white);
    flex-direction: column;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    gap: 18px;
  }
  .hero { padding: 56px 0 72px; }
  .section { padding: 64px 0; }
  .bento { grid-template-columns: 1fr 1fr; }
  .why__grid { grid-template-columns: 1fr; }
  .plans-grid { grid-template-columns: 1fr 1fr; }
  .footer__cols { grid-template-columns: 1fr; }
  .compare-table th, .compare-table td { padding: 12px; font-size: .8rem; }
}