@font-face { font-family:"General Sans"; src:url("../fonts/GeneralSans-Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
  @font-face { font-family:"General Sans"; src:url("../fonts/GeneralSans-Italic.otf") format("opentype"); font-weight:400; font-style:italic; font-display:swap; }
  @font-face { font-family:"General Sans"; src:url("../fonts/GeneralSans-Medium.otf") format("opentype"); font-weight:500; font-style:normal; font-display:swap; }
  @font-face { font-family:"General Sans"; src:url("../fonts/GeneralSans-MediumItalic.otf") format("opentype"); font-weight:500; font-style:italic; font-display:swap; }
  @font-face { font-family:"General Sans"; src:url("../fonts/GeneralSans-Semibold.otf") format("opentype"); font-weight:600; font-style:normal; font-display:swap; }
  @font-face { font-family:"General Sans"; src:url("../fonts/GeneralSans-Bold.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap; }

/* =========================================================================
   RESET + VARIABLES
========================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Skipit brand */
  --green:   #3BD58B;  /* verde de marca — botones / acentos / textos */
  --green-2: #3BD58B;  /* verde íconos */
  --green-3: #3BD58B;  /* verde de marca para textos/labels */
  --green-hover: #2BB873; /* shade más oscuro solo para hovers */
  --green-4: #176640;

  --ink:     #04252B;  /* texto principal (teal casi negro) */
  --ink-2:   #04252B;
  --ink-3:   #031C21;

  --purple:    #8376FF;
  --purple-2:  #B1A1FF;
  --purple-3:  #D0C6FB;
  --purple-bg: #ECE6FF;

  /* Background scale — Framer light grey */
  --bg:        #F3F3F3;
  --bg-card:   #FFFFFF;
  --bg-soft:   #FAFAFA;
  --bg-deep:   #ECECEC;

  /* Borders */
  --border:    rgba(4,37,43,0.08);
  --border-2:  rgba(4,37,43,0.14);
  --muted:     rgba(4,37,43,0.56);
  --muted-2:   rgba(4,37,43,0.38);

  /* Typography — General Sans para todo */
  --font: 'General Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Fragment Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Tokens */
  --r-sm:  10px;
  --r:     16px;
  --r-lg:  22px;
  --r-xl:  28px;
  --r-xxl: 36px;

  --sh-sm: 0 1px 2px rgba(6,46,53,0.04), 0 2px 8px rgba(6,46,53,0.04);
  --sh:    0 4px 12px rgba(6,46,53,0.06), 0 12px 32px rgba(6,46,53,0.06);
  --sh-lg: 0 12px 28px rgba(6,46,53,0.08), 0 32px 64px rgba(6,46,53,0.10);

  --ease:     cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --max-w:  1180px;
  --pad:    clamp(40px, 4.5vw, 68px);
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  font-weight: 400;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img, svg { display: block; max-width: 100%; }

/* =========================================================================
   TYPOGRAPHY — General Sans, Nova-style (smaller, lighter)
========================================================================= */
h1, h2, h3, h4, h5 {
  font-family: var(--font);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.06;
  color: var(--ink);
}

.h-display { font-size: clamp(2.5rem, 5.6vw, 4.4rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.02; }
.h-xl      { font-size: clamp(2rem, 3.8vw, 3.1rem); font-weight: 500; letter-spacing: -0.026em; line-height: 1.08; }
.h-lg      { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.h-md      { font-size: clamp(1.2rem, 1.8vw, 1.4rem); font-weight: 600; letter-spacing: -0.016em; line-height: 1.2; }
.h-sm      { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.012em; }

.body-lg   { font-size: clamp(1.02rem, 1.2vw, 1.12rem); line-height: 1.55; color: var(--muted); }
.body-md   { font-size: .96rem; line-height: 1.6; color: var(--muted); }
.body-sm   { font-size: .88rem; line-height: 1.5; color: var(--muted); }

/* Accent word inside headlines — Framer: NO itálica, mismo dark, bold */
.accent-italic {
  font-style: normal;
  font-weight: 500;
  color: var(--ink);
}

/* =========================================================================
   LAYOUT
========================================================================= */
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.section   { padding: var(--pad) 0; position: relative; }

/* Section header — centered, Nova-style */
.section-header { text-align: center; max-width: 1040px; margin: 0 auto 40px; }
.section-header h2 { margin-bottom: 14px; text-wrap: balance; }
.section-header p  { max-width: 560px; margin: 0 auto; text-wrap: balance; }
/* Títulos de dos oraciones: el <br> manda, sin reequilibrar ni partir la oración */
.section-header h2.h2-split { text-wrap: nowrap; white-space: normal; }
@media (max-width: 760px) {
  .section-header h2.h2-split { text-wrap: balance; }
}

/* Eyebrow — Framer-style: mono mayúscula, sin pill */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 22px;
}
.dark .eyebrow { color: rgba(255,255,255,0.62); }
.eyebrow .dot {
  width: 6px; height: 6px;
  background: var(--green-2);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(59,213,139,0.18);
  animation: pulse 2.4s ease-in-out infinite;
}
.eyebrow .new {
  background: var(--ink);
  color: var(--bg-card);
  font-weight: 600;
  font-size: .62rem;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .5; transform: scale(1.25); }
}

/* Section number label (Nova-style "01") */
.section-num {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
  display: block;
}

/* =========================================================================
   PLACEHOLDERS — keep clear but Nova-soft
========================================================================= */
.ph-text {
  color: inherit;
  display: inline;
}
.ph-num {
  color: inherit;
  font-weight: 600;
  display: inline;
}

.ph-img, .ph-video {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: .82rem;
  font-weight: 500;
  min-height: 180px;
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.ph-img::after, .ph-video::after {
  /* subtle dots pattern overlay */
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(4,37,43,0.05) 1px, transparent 1px);
  background-size: 16px 16px;
  opacity: .5;
  pointer-events: none;
}
.ph-img .ph-label, .ph-video .ph-label {
  position: relative;
  z-index: 2;
  background: var(--bg);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  max-width: 85%;
  font-size: .74rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.ph-video .ph-label::before { content: '▶  '; color: var(--green-3); }

.dark .ph-img, .dark .ph-video {
  background: linear-gradient(135deg, rgba(131,118,255,0.18) 0%, rgba(6,46,53,0.50) 100%);
  border-color: rgba(255,255,255,0.18);
  color: var(--bg-card);
}
.dark .ph-img .ph-label, .dark .ph-video .ph-label {
  background: rgba(6,46,53,0.85);
  color: var(--bg-card);
}
.dark .ph-img::after, .dark .ph-video::after {
  background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
}

/* Logo placeholder slot */
.logo-slot {
  width: 100%;
  height: 52px;
  background: var(--bg-card);
  border: 1px dashed var(--border-2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-align: center;
  padding: 0 6px;
}
.logo-slot.client { border: none; background: transparent; padding: 0 14px; }
.logo-slot.client img {
  max-height: 46px; max-width: 124px; object-fit: contain; display: block;
  filter: grayscale(1); opacity: 0.5;
  transition: filter .3s var(--ease), opacity .3s var(--ease);
}
.logo-slot.client:hover img { filter: grayscale(0); opacity: 1; }
.dark .logo-slot {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.42);
}

/* =========================================================================
   BUTTONS — Nova-style (soft pill, light shadow)
========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--font);
  font-weight: 500;
  font-size: .92rem;
  transition: all .3s var(--ease);
  white-space: nowrap;
  cursor: pointer;
  position: relative;
}
.btn svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn-primary {
  background: var(--ink);
  color: var(--bg-card);
}
.btn-primary:hover { background: var(--ink-2); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(6,46,53,0.18); }

.btn-green {
  background: var(--green);
  color: #fff;
  font-weight: 600;
}
.btn-green:hover { background: var(--green-hover); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(59,213,139,0.38); }

.btn-ghost {
  background: var(--bg-card);
  color: var(--green-3);
  border: 1px solid var(--green);
  font-weight: 600;
}
.btn-ghost:hover { background: rgba(59,213,139,0.08); border-color: var(--green-3); transform: translateY(-1px); }

.btn-purple {
  background: var(--purple);
  color: var(--bg-card);
}
.btn-purple:hover { background: #6F62E0; transform: translateY(-1px); }

.dark .btn-ghost { color: var(--bg-card); border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); }
.dark .btn-ghost:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.32); }

/* =========================================================================
   NAVBAR — flotante, pill
========================================================================= */
.nav-wrap {
  position: fixed;
  top: 16px;
  left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  pointer-events: none;
  transition: transform .35s var(--ease);
}
.nav-wrap.hidden { transform: translateY(-130%); }

.nav {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 8px 8px 18px;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(59,213,139,0.55);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(4,37,43,0.06);
}
.nav-logo {
  display: flex;
  align-items: center;
  padding-right: 12px;
  border-right: 1px solid var(--border);
  margin-right: 2px;
}
.nav-logo img { height: 22px; width: auto; }

.nav-items { display: flex; align-items: center; gap: 1px; }
.nav-item {
  position: relative;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all .25s var(--ease);
}
.nav-item:hover { background: rgba(6,46,53,0.05); }
.nav-item .chev { width: 9px; height: 9px; opacity: .55; transition: transform .3s var(--ease); }
.nav-item:hover .chev { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 220px;
  background: var(--bg-card);
  border-radius: var(--r);
  padding: 7px;
  box-shadow: var(--sh-lg);
  border: 1px solid var(--border);
  opacity: 0;
  visibility: hidden;
  transition: all .3s var(--ease);
}
.nav-item:hover .dropdown {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.dropdown a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink);
}
.dropdown a:hover { background: var(--bg); }
.dropdown a svg { width: 16px; height: 16px; color: var(--green-3); flex-shrink: 0; }

.nav-cta {
  display: flex; gap: 4px;
  padding-left: 6px;
  margin-left: 2px;
  border-left: 1px solid var(--border);
}
.nav-cta .btn { padding: 7px 14px; font-size: .78rem; }

.nav-burger {
  display: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  align-items: center; justify-content: center;
  color: var(--ink);
  border: 1px solid var(--border);
  background: transparent;
  flex: 0 0 auto;
  margin-left: 2px;
  transition: background .25s var(--ease);
}
.nav-burger svg { width: 18px; height: 18px; }
.nav-burger:hover { background: rgba(6,46,53,0.06); }
html[data-theme="dark"] .nav-burger:hover { background: rgba(255,255,255,0.10); }

@media (max-width: 1080px) {
  .nav-burger { display: inline-flex; }
  .nav-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: absolute;
    top: calc(100% + 10px);
    right: 8px;
    min-width: 232px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 8px;
    box-shadow: var(--sh-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .nav-wrap.menu-open .nav-items { opacity: 1; visibility: visible; transform: none; }
  .nav-items .nav-item { width: 100%; padding: 11px 14px; border-radius: 10px; font-size: .92rem; }
}

/* =========================================================================
   REVEAL ANIMATIONS (Nova-style — subtle)
========================================================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .08s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .16s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .24s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: .32s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: .40s; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: .48s; }

@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(2deg); }
}

/* Section marker (dev helper) — oculto en producción */
.section-marker { display: none; }
/* =========================================================================
   01 — HERO (Nova-style)
========================================================================= */
.hero {
  padding: 140px 0 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

/* Tech grid background — líneas finas estilo blueprint */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(4,37,43,0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(4,37,43,0.055) 1px, transparent 1px);
  background-size: 54px 54px;
  background-position: center top;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 32%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 32%, #000 35%, transparent 78%);
}
/* Glow verde difuso detrás del titular — toque tech */
.hero-glow {
  position: absolute;
  z-index: 0;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 90vw);
  height: 560px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 40%, rgba(59,213,139,0.18), transparent 60%);
  filter: blur(40px);
}

.hero-content { position: relative; z-index: 2; }

.hero h1 { margin-bottom: 22px; }
.hero h1 .static {
  display: block;
  color: var(--ink);
  margin-bottom: 2px;
  font-weight: 500;
}
.hero h1 .rotator-wrap {
  display: inline-block;
  position: relative;
  height: 1.3em;
  line-height: 1.3;
  overflow: hidden;
  vertical-align: bottom;
}
.hero h1 .rotator {
  display: inline-block;
  white-space: nowrap;
  line-height: 1.3;
  transition: transform .55s var(--ease), opacity .45s var(--ease);
  font-style: normal;
  font-weight: 500;
  color: var(--green);
}
.hero h1 .rotator.exit { transform: translateY(-105%); opacity: 0; }

.hero-sub {
  max-width: 540px;
  margin: 0 auto 32px;
}

.hero-cta {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

/* Hero mockup row — Nova has phone + dashboard side by side */
.hero-mockup-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: end;
  justify-items: center;
  position: relative;
  z-index: 2;
}
.hero-mockup-row .ph-img {
  aspect-ratio: 16/10;
  width: 100%;
  max-width: 980px;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  min-height: 340px;
}
.hero-mockup-row .skm { max-width: 980px; }

/* Trust strip below hero */
.hero-trust {
  margin-top: 40px;
  position: relative;
  z-index: 2;
}
.hero-trust p {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}
.hero-trust .logos {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 720px;
  margin: 0 auto;
}
.hero-trust .logo-slot { width: 104px; height: 42px; }

/* =========================================================================
   02 — PRODUCTO / PLATAFORMA
========================================================================= */
.producto-section { background: var(--bg); }

.not-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 48px;
}
.not-chips span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}
.not-chips span::before {
  content: '✕';
  color: var(--purple);
  font-weight: 600;
  font-size: .8rem;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* Feature card — Framer style: ícono verde arriba, texto centrado */
.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 40px 28px;
  transition: all .35s var(--ease);
  position: relative;
  text-align: center;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh);
}
.feature-card .card-icon {
  width: 56px; height: 56px;
  margin: 0 auto 22px;
  border-radius: 16px;
  background: var(--green-2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-card .card-icon svg { width: 26px; height: 26px; }
.feature-card h3 { margin-bottom: 10px; }
.feature-card p  { font-size: .94rem; color: var(--muted); max-width: 280px; margin: 0 auto; }

@media (max-width: 900px) { .cards-grid { grid-template-columns: 1fr; } }
@media (min-width: 900px) and (max-width: 1100px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }

/* =========================================================================
   03 — TABS (light)
========================================================================= */
.tabs-section { background: var(--bg-soft); }

.tab-switcher-wrap { display: flex; justify-content: center; }
.tab-switcher {
  display: inline-flex;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 4px;
  border-radius: 999px;
  margin: 0 auto 44px;
  gap: 2px;
}
.tab-switcher button {
  padding: 9px 18px;
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 500;
  color: var(--muted);
  transition: all .3s var(--ease);
}
.tab-switcher button.active {
  background: var(--ink);
  color: var(--bg-card);
}

.tab-content { display: none; }
.tab-content.active { display: block; animation: tabIn .55s var(--ease); }
@keyframes tabIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.modes-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.mode-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 30px 22px;
  text-align: center;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.mode-card::before { /* barra de acento superior que crece al hover */
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--green);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.mode-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(6,46,53,0.10);
  border-color: var(--green);
}
.mode-card:hover::before { transform: scaleX(1); }
.mode-card .icon {
  width: 56px; height: 56px;
  background: rgba(59,213,139,0.12);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-3);
  margin: 0 auto 18px;
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.mode-card:hover .icon { background: var(--green); color: var(--ink); transform: scale(1.08) rotate(-3deg); }
.mode-card .icon svg { width: 26px; height: 26px; }
.mode-card h4 { font-size: 1.06rem; margin-bottom: 7px; }
.mode-card p  { font-size: .8rem; color: var(--muted); line-height: 1.5; }

@media (max-width: 1000px) { .modes-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 600px)  { .modes-grid { grid-template-columns: repeat(2,1fr); } }

.verticals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.vertical-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all .3s var(--ease);
  text-align: left;
}
.vertical-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh);
  border-color: var(--green-2);
}
.vertical-card .v-icon {
  width: 42px; height: 42px;
  background: var(--bg);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-3);
  margin-bottom: 16px;
  transition: all .3s var(--ease);
}
.vertical-card:hover .v-icon { background: var(--green); color: var(--ink); }
.vertical-card .v-icon svg { width: 22px; height: 22px; }
.vertical-card h4 { font-size: 1.1rem; margin-bottom: 8px; }
.vertical-card .v-desc { font-size: .82rem; color: var(--muted); }
.vertical-card .v-logos {
  display: flex; gap: 6px; margin-top: 16px; flex-wrap: wrap;
}
.vertical-card .v-logos .logo-slot {
  width: 56px; height: 34px;
  font-size: .58rem;
}

@media (max-width: 900px) { .verticals-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   04 — MÉTRICAS (DARK · única sección oscura grande)
========================================================================= */
.metrics-section {
  background: linear-gradient(165deg, #052a20 0%, #041a22 100%);
  color: var(--bg-card);
  position: relative;
  overflow: hidden;
}

/* Números grandes con divisores (estilo resultados) */
.metrics-figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 44px 0 60px;
  position: relative; z-index: 1;
}
.metrics-figures .fig {
  padding: 6px clamp(16px, 2.4vw, 32px);
  border-left: 1px solid rgba(255,255,255,0.13);
}
.metrics-figures .fig:first-child { border-left: none; padding-left: 0; }
.metrics-figures .fig .n {
  font-size: clamp(2.6rem, 5.2vw, 4.1rem);
  font-weight: 600; font-style: italic;
  letter-spacing: -0.03em; line-height: 1;
  color: var(--green);
}
.metrics-figures .fig .l { font-size: 1rem; font-weight: 600; color: #fff; margin-top: 16px; }
.metrics-figures .fig .s { font-size: .82rem; color: rgba(255,255,255,0.5); margin-top: 5px; }

/* Mapa de locales */
.metrics-map-wrap { position: relative; z-index: 1; }
.metrics-map-head { text-align: center; max-width: 560px; margin: 0 auto 28px; }
.metrics-map-head h3 { color: #fff; margin-bottom: 8px; }
.metrics-map-head p { color: rgba(255,255,255,0.6); }
.metrics-map {
  width: 100%; height: 460px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 30px 70px rgba(0,0,0,0.35);
}
.metrics-map .leaflet-container { background: #eaeaea; font-family: var(--font); }
.metrics-map .leaflet-popup-content-wrapper { background: #fff; color: var(--ink); border-radius: 10px; font-weight: 600; font-size: .82rem; box-shadow: 0 6px 20px rgba(6,46,53,0.18); }
.metrics-map .leaflet-popup-tip { background: #fff; }

@media (max-width: 860px) {
  .metrics-figures { grid-template-columns: 1fr 1fr; gap: 30px 0; }
  .metrics-figures .fig:nth-child(3) { border-left: none; padding-left: 0; }
}
@media (max-width: 520px) {
  .metrics-figures { grid-template-columns: 1fr; gap: 26px; text-align: center; }
  .metrics-figures .fig { border-left: none; padding: 0; }
  .metrics-map { height: 360px; }
}
.metrics-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 90%);
  pointer-events: none;
}
.metrics-section .glow {
  position: absolute;
  top: -200px; left: 50%;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(59,213,139,0.12), transparent 60%);
  transform: translateX(-50%);
  pointer-events: none;
  animation: floaty 12s ease-in-out infinite;
}
.metrics-section > .container { position: relative; z-index: 2; }

.metrics-section .section-header h2 { color: #fff; }
.metrics-section .section-header h2 .accent-italic { color: #fff; }
.metrics-section .section-header p  { color: rgba(255,255,255,0.6); }
.metrics-section .eyebrow {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  box-shadow: none;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 60px;
}
.stat-card {
  text-align: center;
  padding: 36px 22px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-lg);
  transition: all .3s var(--ease);
}
.stat-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(59,213,139,0.30);
  transform: translateY(-3px);
}
.stat-card .stat-num {
  font-size: clamp(2.2rem, 4.6vw, 3.2rem);
  font-weight: 600;
  color: var(--green);
  letter-spacing: -0.032em;
  line-height: 1;
  margin-bottom: 10px;
}
.stat-card .stat-label { color: rgba(255,255,255,0.78); font-size: .92rem; }

.metrics-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
}
.metrics-bottom .map-ph {
  aspect-ratio: 4/5;
  max-height: 480px;
}
.metrics-bottom .impact-content { text-align: left; }
.metrics-bottom .impact-content h3 { color: var(--bg-card); margin-bottom: 20px; }

.impact-list li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 18px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.impact-list li:last-child { border-bottom: none; }
.impact-list .num {
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--green);
  letter-spacing: -0.026em;
}
.impact-list .desc { color: rgba(255,255,255,0.7); font-size: .9rem; }

.logos-marquee-wrap {
  margin-top: 60px;
  padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.logos-marquee-wrap p {
  text-align: center;
  color: rgba(255,255,255,0.45);
  margin-bottom: 24px;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
}
.marquee {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
}
.marquee-track {
  display: flex;
  gap: 14px;
  animation: marquee 32s linear infinite;
  width: fit-content;
}
.marquee-track .logo-slot { width: 122px; height: 54px; flex-shrink: 0; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 900px) {
  .stats-row { grid-template-columns: 1fr; }
  .metrics-bottom { grid-template-columns: 1fr; }
}

/* =========================================================================
   05 — CÓMO SE USA (Nova "Step 1/2/3" style)
========================================================================= */
.howto-section { background: var(--bg); }

.steps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.step-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  transition: all .3s var(--ease);
  text-align: left;
}
.step-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh);
}
.step-card .step-visual {
  aspect-ratio: 4/5;
  border-radius: var(--r);
  margin-bottom: 16px;
  min-height: 200px;
}
.step-card .step-label {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green-3);
  margin-bottom: 6px;
  display: block;
}
.step-card h4 { font-size: 1.02rem; margin-bottom: 6px; }
.step-card p  { font-size: .82rem; color: var(--muted); line-height: 1.5; }

@media (max-width: 1000px) { .steps-grid { grid-template-columns: repeat(3,1fr); } .step-card:nth-child(4), .step-card:nth-child(5) { grid-column: span 1; } }
@media (max-width: 760px)  {
  .steps-grid { grid-template-columns: 1fr; gap: 16px; }
  .step-card:nth-child(5) { grid-column: auto; }
  .step-card { min-width: 0; }
  /* el visual deja de forzar un alto/ancho mínimo: se ajusta al contenido */
  .step-card .step-visual { aspect-ratio: auto; min-height: 0; max-width: 320px; margin-left: auto; margin-right: auto; }
}

.howto-tag {
  text-align: center;
  margin-top: 50px;
  font-style: italic;
  font-weight: 500;
  color: var(--green-3);
}

/* =========================================================================
   06 — ANTES vs DESPUÉS
========================================================================= */
.compare-section { background: var(--bg-soft); }
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 1060px;
  margin: 0 auto;
}
.compare-col {
  border-radius: var(--r-lg);
  padding: 32px 30px;
  text-align: left;
  transition: all .3s var(--ease);
}
.compare-col.bad {
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.compare-col.good {
  background: var(--ink);
  color: var(--bg-card);
  position: relative;
  overflow: hidden;
}
.compare-col.good::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(59,213,139,0.20), transparent 70%);
  border-radius: 50%;
  transition: transform .5s var(--ease);
}
.compare-col.good:hover::before { transform: scale(1.3); }
.compare-col h3 {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative; z-index: 2;
}
.compare-col.bad h3::before {
  content: '✕';
  width: 28px; height: 28px;
  background: rgba(220,80,80,0.10);
  color: #C44;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
}
.compare-col.good h3 { color: var(--bg-card); }
.compare-col.good h3::before {
  content: '✓';
  width: 28px; height: 28px;
  background: var(--green);
  color: var(--ink);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
}
.compare-list { position: relative; z-index: 2; }
.compare-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: .92rem;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.compare-col.good .compare-list li {
  border-bottom-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.88);
}
.compare-list li:last-child { border-bottom: none; }
.compare-list li::before {
  content: '—';
  color: var(--purple);
  font-weight: 600;
  flex-shrink: 0;
}
.compare-col.good .compare-list li::before { content: '→'; color: var(--green); }

@media (max-width: 800px) { .compare-grid { grid-template-columns: 1fr; } }
/* =========================================================================
   07 — ONBOARDING
========================================================================= */
.onboard-section { background: var(--bg); }
/* Onboarding — stepper horizontal */
.timeline {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 14px auto 0;
  padding: 4px 0 18px;
  list-style: none;
  counter-reset: step;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.timeline::-webkit-scrollbar { height: 6px; }
.timeline::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }

.timeline-item {
  position: relative;
  flex: 1 0 0;
  min-width: 150px;
  padding: 66px 14px 0;
  text-align: center;
  counter-increment: step;
  scroll-snap-align: center;
}

/* Línea conectora entre nodos */
.timeline-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 28px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, var(--green-2), var(--green-3));
  z-index: 0;
}

/* Nodo numerado */
.timeline-item::before {
  content: counter(step);
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card);
  border: 2px solid var(--green-2);
  border-radius: 50%;
  color: var(--ink);
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 0 0 5px var(--bg);
  z-index: 1;
  transition: all .3s var(--ease);
}
.timeline-item:hover::before {
  background: var(--green);
  border-color: var(--green);
  transform: translateX(-50%) scale(1.1);
}

.timeline-item .day {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green-3);
  margin-bottom: 6px;
  display: inline-block;
}
.timeline-item h4 { font-size: 1.02rem; margin-bottom: 6px; line-height: 1.25; }
.timeline-item p { color: var(--muted); font-size: .84rem; }

/* Paso final destacado */
.timeline-item.final::before {
  content: '✓';
  background: var(--green);
  border-color: var(--green);
  color: var(--ink);
  font-size: 1.25rem;
}
.timeline-item.final h4 { color: var(--green-3); }

@media (max-width: 720px) {
  .timeline { gap: 4px; }
  .timeline-item { min-width: 168px; }
}

/* =========================================================================
   08 — MARKETING (light purple-tinted Nova style)
========================================================================= */
.marketing-section {
  background: linear-gradient(180deg, var(--purple-bg) 0%, var(--bg-soft) 100%);
  position: relative;
  overflow: hidden;
}
.marketing-section::before {
  content: '';
  position: absolute;
  top: -100px; right: -50px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(131,118,255,0.20), transparent 60%);
  pointer-events: none;
  animation: floaty 10s ease-in-out infinite;
}
.marketing-section > .container { position: relative; z-index: 2; }

.mk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.mk-features { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.mk-card {
  background: var(--bg-card);
  border: 1px solid rgba(131,118,255,0.16);
  border-radius: var(--r);
  padding: 18px 20px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  transition: all .3s var(--ease);
}
.mk-card:hover {
  transform: translateX(6px);
  box-shadow: var(--sh);
}
.mk-card .icon {
  width: 42px; height: 42px;
  background: var(--purple);
  color: var(--bg-card);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mk-card .icon svg { width: 19px; height: 19px; }
.mk-card h4 { font-size: .98rem; margin-bottom: 3px; }
.mk-card p  { font-size: .82rem; color: var(--muted); }

.mk-visual .ph-img {
  aspect-ratio: 1/1;
  min-height: 340px;
  border-radius: var(--r-lg);
}

/* Marketing · CRM + widgets flotantes */
.mk-visual { position: relative; }
.mk-float { position: absolute; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 44px rgba(6,46,53,0.18); padding: 13px 14px; width: 216px; z-index: 5; }
.mk-float .h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.mk-float .h b { font-size: .8rem; }
.mk-bars { display: flex; flex-direction: column; gap: 10px; }
.mk-bar .lbl { display: flex; justify-content: space-between; font-size: .7rem; color: var(--ink); margin-bottom: 4px; }
.mk-bar .lbl span:last-child { color: var(--muted); }
.mk-bar .track { height: 6px; border-radius: 3px; background: rgba(4,37,43,0.08); }
.mk-bar .fill { height: 100%; border-radius: 3px; background: var(--green); }
.mk-wpp .wh { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.mk-wpp .wh .av { width: 24px; height: 24px; border-radius: 50%; background: #25D366; flex: 0 0 auto; }
.mk-wpp .wh b { font-size: .76rem; }
.mk-wpp .wh em { font-size: .58rem; font-style: normal; color: var(--green-3); }
.mk-wpp .bub { background: rgba(59,213,139,0.12); border-radius: 11px; border-top-left-radius: 3px; padding: 9px 11px; font-size: .74rem; line-height: 1.4; color: var(--ink); }
.mk-float-bl { left: -26px; bottom: 26px; }
.mk-float-tr { right: -22px; top: 34px; width: 206px; }
@media (max-width: 1100px) { .mk-float-bl { left: -8px; } .mk-float-tr { right: -6px; } }
@media (max-width: 560px) { .mk-float { display: none; } }

@media (max-width: 900px) { .mk-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   09 — INTEGRACIONES (light)
========================================================================= */
.integ-section { background: var(--bg); }

.integ-headline {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  font-weight: 600;
  text-align: center;
  max-width: 920px;
  margin: 0 auto 18px;
  letter-spacing: -0.028em;
  line-height: 1.12;
}
.integ-headline .strike {
  position: relative;
  display: inline-block;
  color: var(--muted-2);
}
.integ-headline .strike::after {
  content: '';
  position: absolute;
  left: -3%; right: -3%;
  top: 55%;
  height: 2.5px;
  background: var(--green);
  transform: rotate(-3deg);
}
.integ-sub {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 56px;
}

.integ-types {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.integ-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 22px;
  transition: all .3s var(--ease);
  text-align: left;
}
.integ-card:hover {
  border-color: var(--green-2);
  transform: translateY(-3px);
  box-shadow: var(--sh-sm);
}
.integ-card h4 { font-size: 1rem; margin-bottom: 16px; }
.integ-card .logos-mini { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.integ-card .logos-mini .logo-slot { height: 62px; border-style: solid; border-color: var(--border); background: #fff; padding: 8px 12px; }
.integ-card .logos-mini .logo-slot img { max-height: 38px; max-width: 100%; object-fit: contain; display: block; }
.integ-card .logos-mini .logo-slot img.lg { max-height: 54px; transform: scale(1.18); }

.integ-cta {
  margin-top: 40px;
  background: var(--ink);
  border-radius: var(--r-xl);
  padding: 32px 36px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.integ-cta::before {
  content: '';
  position: absolute;
  top: 0; right: -100px;
  width: 400px; height: 100%;
  background: radial-gradient(ellipse, rgba(131,118,255,0.20), transparent 70%);
}
.integ-cta > * { position: relative; z-index: 2; }
.integ-cta .eyebrow {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.85);
  box-shadow: none;
  margin-bottom: 10px;
}
.integ-cta h3 { color: var(--bg-card); margin-bottom: 6px; font-size: 1.3rem; }
.integ-cta p  { color: rgba(255,255,255,0.65); font-size: .9rem; max-width: 520px; }

@media (max-width: 900px) {
  .integ-types { grid-template-columns: 1fr 1fr; }
  .integ-cta { grid-template-columns: 1fr; }
  .integ-cta .btn { justify-self: center; }
}
@media (max-width: 600px) {
  /* card a todo el ancho → logos más grandes */
  .integ-types { grid-template-columns: 1fr; }
  .integ-card .logos-mini { grid-template-columns: repeat(3, 1fr); }
  .integ-card .logos-mini .logo-slot { height: 72px; }
  .integ-card .logos-mini .logo-slot img { max-height: 46px; }
  .integ-card .logos-mini .logo-slot img.lg { max-height: 60px; }
}

/* =========================================================================
   10 — SKIPITADS
========================================================================= */
/* SkipitAds — sección con presencia (fondo violeta suave) */
.ads-section { background: linear-gradient(180deg, #efeaff 0%, #f7f4ff 100%); }
.ads-section .eyebrow { background: rgba(131,118,255,0.12); border-color: rgba(131,118,255,0.25); color: var(--purple); }
.ads-section .eyebrow .dot { background: var(--purple); }

.ads-stage { position: relative; max-width: 1080px; margin: 18px auto 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(16px, 2.6vw, 40px); }
.ads-col { display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 22px); }
.ads-w { background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 16px 40px rgba(6,46,53,0.13); padding: 16px 18px; }
.ads-w .h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ads-w .h b { font-size: .92rem; }
.ads-w .li { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--ink); padding: 4px 0; }
.ads-w .li .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); flex: 0 0 auto; }
.ads-stage .ads-phone { width: 312px; justify-self: center; }
.ads-strip { max-width: 760px; margin: 18px auto 0; text-align: center; }
.ads-strip > span { font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ads-brands { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.ads-brands span { font-weight: 700; font-size: .78rem; color: var(--purple); background: #fff; border: 1px solid rgba(131,118,255,0.22); border-radius: 999px; padding: 7px 16px; }
.ads-phone .pho-screen { padding: 6px 13px 16px; gap: 9px; }
.ads-saldo { display: flex; align-items: center; justify-content: space-between; background: var(--green); color: var(--ink); border-radius: 999px; padding: 9px 15px; font-size: .74rem; font-weight: 600; }
.ads-banner { position: relative; height: 64px; border-radius: 11px; overflow: hidden; }
.ads-banner-track { display: flex; width: 300%; height: 100%; animation: adsBanner 9s infinite; }
.ads-banner-slide { width: 33.333%; height: 100%; display: flex; align-items: center; padding: 0 14px; font-weight: 800; font-size: .82rem; font-style: italic; }
.ads-banner-slide.s1 { background: linear-gradient(110deg, #e9c98a, #d3a052); color: #6a2b2b; }
.ads-banner-slide.s2 { background: linear-gradient(110deg, #bcd0f0, #7fa8e0); color: #1b3a6b; }
.ads-banner-slide.s3 { background: linear-gradient(110deg, #cdeecd, #7fce8f); color: #1d5b2c; }
@keyframes adsBanner {
  0%, 28%   { transform: translateX(0); }
  33%, 61%  { transform: translateX(-33.333%); }
  66%, 94%  { transform: translateX(-66.666%); }
  100%      { transform: translateX(0); }
}
.ads-banner .dots { position: absolute; bottom: 7px; right: 12px; display: flex; gap: 4px; z-index: 2; }
.ads-banner .dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.55); animation: adsDots 9s infinite; }
.ads-banner .dots i:nth-child(2) { animation-delay: 3s; }
.ads-banner .dots i:nth-child(3) { animation-delay: 6s; }
@keyframes adsDots { 0%,28%{ background:#fff; } 30%,100%{ background: rgba(255,255,255,0.45); } }

.ads-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ads-metrics .lbl { display: block; font-size: .56rem; color: var(--muted); margin-bottom: 2px; }
.ads-metrics b { font-size: 1.02rem; }
.mk-float .li { display: flex; align-items: center; gap: 8px; font-size: .74rem; color: var(--ink); padding: 3px 0; }
.mk-float .li .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); flex: 0 0 auto; }
.ads-prods { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ads-prod { position: relative; border: 1px solid var(--border); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 5px; }
.ads-prod .tag { position: absolute; top: 6px; left: 6px; background: #f0e64e; color: #04252b; font-size: .54rem; font-weight: 800; padding: 2px 7px; border-radius: 6px; z-index: 1; }
.ads-prod .th { height: 46px; border-radius: 7px; background: rgba(4,37,43,0.07); }
.ads-prod .pho-price { font-size: .64rem; }

.ads-promo { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 9px; padding: 9px 0; border-top: 1px solid var(--border); font-size: .82rem; color: var(--ink); }
.ads-promo:first-of-type { border-top: none; }
.ads-promo .pill { font-size: .56rem; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.ads-promo .tg { width: 26px; height: 15px; border-radius: 999px; background: rgba(4,37,43,0.15); position: relative; flex: 0 0 auto; }
.ads-promo .tg.on { background: var(--green); }
.ads-promo .tg::after { content: ''; position: absolute; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; left: 2px; }
.ads-promo .tg.on::after { left: 13px; }
.ads-bannerprev { height: 64px; border-radius: 10px; background: linear-gradient(110deg,#bcd0f0,#8fb0e0); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: .78rem; font-style: italic; margin-bottom: 10px; }
.ads-w .op-tot { font-size: .82rem; }

.ads-points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 46px; }
.ads-point { border-top: 2px solid var(--purple); padding-top: 14px; }
.ads-point b { display: block; font-size: .98rem; margin-bottom: 5px; }
.ads-point p { font-size: .84rem; color: var(--muted); }

@media (max-width: 920px) {
  /* las columnas se aplanan: los 6 widgets fluyen en una grilla de 2, teléfono arriba */
  .ads-stage { grid-template-columns: 1fr 1fr; max-width: 560px; gap: 12px; align-items: start; }
  .ads-phone { grid-column: 1 / -1; order: -1; justify-self: center; margin-bottom: 4px; }
  .ads-col { display: contents; }
}
@media (max-width: 760px) {
  .ads-points { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
  .ads-stage { grid-template-columns: 1fr; max-width: 320px; }
  .ads-points { grid-template-columns: 1fr; }
}

/* =========================================================================
   11 — INSIGHTS (datos de color)
========================================================================= */
.insights-section { background: var(--bg); }
.insights-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.insight-card {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  padding: 26px 22px;
  border: 1px solid var(--border);
  transition: all .3s var(--ease);
  text-align: left;
}
.insight-card:hover { transform: translateY(-3px); box-shadow: var(--sh-sm); }
.insight-card .insight-tag {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 14px;
}
.insight-card .insight-num {
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--green-3);
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -0.032em;
}
.insight-card h4 { font-size: .96rem; margin-bottom: 4px; }
.insight-card p  { font-size: .8rem; color: var(--muted); }

@media (max-width: 900px) { .insights-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .insights-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   12 — PLANES (Nova-style pricing)
========================================================================= */
.plans-section { background: var(--bg-soft); }

.pricing-toggle {
  display: inline-flex;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 4px;
  border-radius: 999px;
  margin: 0 auto 44px;
  gap: 2px;
}
.pricing-toggle-wrap { display: flex; justify-content: center; }
.pricing-toggle button {
  padding: 8px 18px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--muted);
  transition: all .3s var(--ease);
}
.pricing-toggle button.active { background: var(--ink); color: var(--bg-card); }
.pricing-toggle button .save {
  font-size: .58rem;
  font-weight: 600;
  background: var(--green);
  color: var(--ink);
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 6px;
  letter-spacing: .04em;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 1080px;
  margin: 0 auto;
}
.plan {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: all .3s var(--ease);
  position: relative;
  text-align: left;
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.plan.featured {
  background: var(--ink);
  color: var(--bg-card);
  border-color: transparent;
  transform: scale(1.02);
}
.plan.featured:hover { transform: scale(1.02) translateY(-4px); }
.plan .badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--green);
  color: var(--ink);
  font-size: .6rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.plan .plan-name {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green-3);
  margin-bottom: 10px;
}
.plan.featured .plan-name { color: var(--green); }
.plan h3 { font-size: 1.4rem; margin-bottom: 10px; }
.plan.featured h3 { color: var(--bg-card); }
.plan .plan-desc {
  color: var(--muted);
  font-size: .86rem;
  margin-bottom: 22px;
  min-height: 42px;
}
.plan.featured .plan-desc { color: rgba(255,255,255,0.7); }
.plan .price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.plan.featured .price { border-bottom-color: rgba(255,255,255,0.08); }
.plan .price-num {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.028em;
}
.plan.featured .price-num { color: var(--bg-card); }
.plan .price-period { font-size: .86rem; color: var(--muted); }
.plan.featured .price-period { color: rgba(255,255,255,0.55); }

.plan ul { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; flex: 1; }
.plan ul li {
  font-size: .86rem;
  color: var(--muted);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.plan.featured ul li { color: rgba(255,255,255,0.85); }
.plan ul li::before {
  content: '✓';
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--green-2);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.plan.featured ul li::before { background: var(--green); color: #04252b; }
.plan .btn { justify-content: center; width: 100%; }

@media (max-width: 900px) {
  .plans-grid { grid-template-columns: 1fr; }
  .plan.featured { transform: none; }
}

/* =========================================================================
   13 — FAQ
========================================================================= */
.faq-section { background: var(--bg); }
.faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  transition: all .3s var(--ease);
}
.faq-item:hover { border-color: rgba(59,213,139,0.32); }
.faq-item.open { box-shadow: var(--sh-sm); border-color: var(--border-2); }
.faq-question {
  width: 100%;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-family: var(--font);
  font-size: .98rem;
  font-weight: 500;
  text-align: left;
}
.faq-question .toggle {
  width: 26px; height: 26px;
  background: var(--bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .3s var(--ease);
  color: var(--green-3);
  font-size: 1rem;
  font-weight: 600;
}
.faq-item.open .toggle {
  background: var(--green);
  color: var(--ink);
  transform: rotate(45deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--ease), padding .4s var(--ease);
  padding: 0 24px;
  color: var(--muted);
}
.faq-item.open .faq-answer { max-height: 400px; padding: 0 24px 20px; }

/* =========================================================================
   CTA FINAL
========================================================================= */
.cta-final {
  background: var(--bg);
  padding: var(--pad) 0;
  text-align: center;
}
.cta-final-card {
  background: var(--ink);
  border-radius: var(--r-xl);
  padding: clamp(18px, 2vw, 28px) 36px;
  position: relative;
  overflow: hidden;
  max-width: 920px;
  margin: 0 auto;
}
.cta-final-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.cta-final-card::after {
  content: '';
  position: absolute;
  top: -150px; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(59,213,139,0.18), transparent 60%);
  animation: floaty 9s ease-in-out infinite;
}
.cta-final-card > * { position: relative; z-index: 2; }
.cta-final-card h2 { color: var(--bg-card); margin-bottom: 16px; }
.cta-final-card p { color: rgba(255,255,255,0.7); max-width: 520px; margin: 0 auto 28px; }

/* =========================================================================
   FOOTER
========================================================================= */
.footer {
  background: var(--bg);
  color: var(--ink);
  padding: 72px 0 32px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.footer-brand .footer-logo { margin-bottom: 16px; }
.footer-brand .footer-logo img { height: 32px; width: auto; }
.footer-brand p {
  color: var(--muted);
  font-size: .86rem;
  max-width: 280px;
  margin-bottom: 18px;
}
.footer-socials { display: flex; gap: 8px; }
.social-icon {
  width: 34px; height: 34px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s var(--ease);
  color: var(--muted);
}
.social-icon:hover { background: var(--green); color: #fff; border-color: var(--green); }
.social-icon svg { width: 14px; height: 14px; }

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.footer-col ul li a {
  color: var(--ink);
  font-size: .86rem;
  transition: color .25s var(--ease);
}
.footer-col ul li a:hover { color: var(--green-3); }

.footer-bottom {
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--muted-2);
  font-size: .78rem;
}
.footer-bottom .legal { display: flex; gap: 20px; }
.footer-bottom .legal a:hover { color: var(--green-3); }

@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   PAGE HERO — header de páginas internas (producto, skipitads)
========================================================================= */
.page-hero {
  padding: 160px 0 64px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { margin: 16px auto 18px; max-width: 16ch; }
.page-hero p { max-width: 560px; margin: 0 auto; }
.page-hero .page-hero-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

/* =========================================================================
   FEATURE SPLIT — deep-dive alternado (texto + mockup)
========================================================================= */
.feature-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 84px);
  align-items: center;
  padding: clamp(56px, 7vw, 104px) 0;
}
.feature-split + .feature-split { border-top: 1px solid var(--border); }
.feature-split.reverse .fs-text { order: 2; }

.fs-label {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green-3);
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.fs-text h2 { margin-bottom: 16px; }
.fs-text > p { color: var(--muted); margin-bottom: 24px; max-width: 46ch; }

.fs-list { display: flex; flex-direction: column; gap: 13px; margin-bottom: 26px; }
.fs-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .96rem;
  color: var(--ink);
}
.fs-list li::before {
  content: '✓';
  width: 22px; height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--green-2);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.fs-list li span { color: var(--muted); }

.fs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-chips span {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}

.fs-visual { position: relative; }
.fs-visual .ph-img {
  width: 100%;
  min-height: 400px;
  aspect-ratio: 4/3;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
}
.fs-visual .fs-stat {
  position: absolute;
  bottom: 22px; left: 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 18px;
  box-shadow: var(--sh);
}
.fs-visual .fs-stat .n { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.fs-visual .fs-stat .l { font-family: var(--font-mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

@media (max-width: 880px) {
  .feature-split { grid-template-columns: 1fr; gap: 32px; }
  .feature-split.reverse .fs-text { order: 0; }
  .fs-visual .ph-img { min-height: 300px; }
}

/* Cross-page narrative band (entre Pedidos y Métricas) */
.flow-band {
  background: var(--ink);
  color: var(--bg-card);
  text-align: center;
  padding: clamp(60px, 8vw, 110px) 0;
  position: relative;
  overflow: hidden;
}
.flow-band h2 { color: var(--bg-card); max-width: 18ch; margin: 0 auto 14px; }
.flow-band p { color: rgba(255,255,255,0.66); max-width: 520px; margin: 0 auto; }
.flow-band .flow-steps {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 36px;
}
.flow-band .flow-step {
  font-family: var(--font-mono);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--green);
  border: 1px solid rgba(59,213,139,0.35);
  border-radius: 999px;
  padding: 9px 18px;
}
.flow-band .flow-arrow { color: rgba(255,255,255,0.4); }

/* ===== Home teaser CTAs (links to dedicated pages) ===== */
.section-more { display: flex; justify-content: center; margin-top: 46px; }
.ads-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn-on-dark { color: #fff; border-color: rgba(255,255,255,0.28); }
.btn-on-dark:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); }

/* Botón flotante WhatsApp (reemplaza el chat) */
.skbot-toggle.skbot-wa { background: #25D366; color: #fff; }
.skbot-wa svg { position: static; width: 30px; height: 30px; }

/* =========================================================================
   MOCKUPS EN CÓDIGO — "skeleton" fiel al backoffice de Skipit (.skm-*)
   Tema claro: app blanca, área gris, acentos verde de marca + violeta charts.
========================================================================= */
.skm {
  --skm-bg: #ffffff;       /* chrome / sidebar / topbar */
  --skm-panel: #f3f4f5;    /* área de contenido */
  --skm-card: #ffffff;     /* tarjetas */
  --skm-line: rgba(4,37,43,0.09);
  --skm-text: #04252b;
  --skm-muted: rgba(4,37,43,0.5);
  --skm-purple: #7b85ff;   /* violeta de gráficos del producto */
  width: 100%;
  background: var(--skm-bg);
  border: 1px solid var(--skm-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  font-family: var(--font);
  color: var(--skm-text);
  text-align: left;
  position: relative;
}

/* Barra de ventana (browser frame) */
.skm-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px;
  background: var(--skm-bg);
  border-bottom: 1px solid var(--skm-line);
}
.skm-bar i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.skm-bar i:nth-child(1) { background: #ff5f57; }
.skm-bar i:nth-child(2) { background: #febc2e; }
.skm-bar i:nth-child(3) { background: var(--green); }
.skm-url {
  margin-left: 10px; flex: 1; max-width: 280px;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .03em;
  color: var(--skm-muted);
  background: var(--skm-panel); border: 1px solid var(--skm-line);
  border-radius: 999px; padding: 4px 12px;
}

/* Layout app: sidebar + main */
.skm-app { display: grid; grid-template-columns: 50px 1fr; }
.skm-side { background: var(--skm-bg); border-right: 1px solid var(--skm-line); padding: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 13px; }
.skm-side .logo { width: 26px; height: 26px; border-radius: 8px; background: rgba(59,213,139,0.18); margin-bottom: 6px; }
.skm-side i { width: 20px; height: 20px; border-radius: 6px; background: rgba(4,37,43,0.10); display: block; }
.skm-side i.on { background: var(--green); }
.skm-main { background: var(--skm-panel); padding: 16px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* Topbar de la app */
.skm-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.skm-top .title { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.skm-top .tools { display: flex; align-items: center; gap: 10px; }
.skm-toggle { width: 30px; height: 17px; border-radius: 999px; background: var(--ink); position: relative; }
.skm-toggle::after { content: ''; position: absolute; top: 2.5px; right: 2.5px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.skm-pill { font-size: .68rem; color: var(--skm-text); background: var(--skm-card); border: 1px solid var(--skm-line); border-radius: 999px; padding: 5px 12px; display: inline-flex; align-items: center; gap: 8px; }
.skm-pill::after { content: '⌄'; color: var(--skm-muted); margin-top: -4px; }
.skm-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; color: var(--green-3); }
.skm-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(59,213,139,.6); animation: skbot-pulse 2s infinite; }

/* Stat cards */
.skm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.skm-stat { background: var(--skm-card); border: 1px solid var(--skm-line); border-radius: 14px; padding: 13px 15px; }
.skm-stat .l { display: block; font-size: .62rem; color: var(--skm-muted); margin-bottom: 6px; }
.skm-stat .v { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.skm-stat .d { font-size: .6rem; color: var(--green-3); font-weight: 600; }

/* Grilla de 2 widgets */
.skm-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; align-items: stretch; }

/* Chart card */
.skm-card-w { background: var(--skm-card); border: 1px solid var(--skm-line); border-radius: 14px; padding: 14px 15px; min-width: 0; }
.skm-card-w .wl { font-size: .78rem; font-weight: 600; margin-bottom: 8px; }
.skm-chart svg { display: block; width: 100%; height: 132px; }

/* Comanda KDS */
.skm-order { background: var(--skm-card); border: 1px solid var(--skm-line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; box-shadow: 0 6px 16px rgba(6,46,53,0.05); }
.skm-order .o-head { display: flex; justify-content: space-between; font-size: .72rem; color: var(--skm-text); padding-bottom: 9px; border-bottom: 1px solid var(--skm-line); }
.skm-order .o-head .t { color: var(--skm-muted); }
.skm-order .o-name { font-size: .8rem; font-weight: 600; margin: 9px 0; }
.skm-order .o-item { display: flex; justify-content: space-between; font-size: .76rem; }
.skm-order .o-sub { font-size: .68rem; color: var(--skm-muted); margin: 2px 0 8px 8px; }
.skm-order .o-total { display: flex; justify-content: space-between; font-size: .74rem; padding-top: 9px; margin-top: auto; border-top: 1px solid var(--skm-line); }
.skm-order .o-total .v { font-weight: 700; }
.skm-order .o-btn { align-self: flex-end; margin-top: 12px; font-size: .72rem; font-weight: 600; color: var(--ink); border: 1px solid var(--green); background: var(--green); border-radius: 999px; padding: 7px 20px; }
.skm-order .o-btn.ghost { background: transparent; color: var(--skm-text); border-color: var(--skm-line); }

/* CRM mockup (marketing) */
.skm-crm-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.skm-crm-stats .skm-stat .v { font-size: 1.15rem; }
.skm-crm { background: var(--skm-card); border: 1px solid var(--skm-line); border-radius: 12px; padding: 12px 14px; }
.skm-crm .crm-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.skm-crm .crm-h b { font-size: .82rem; }
.skm-crm .crm-h .dl { font-family: var(--font-mono); font-size: .54rem; text-transform: uppercase; letter-spacing: .06em; color: var(--green-3); }
.crm-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--skm-line); }
.crm-row:first-of-type { border-top: none; }
.crm-row .who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.crm-row .av { width: 24px; height: 24px; border-radius: 50%; background: rgba(4,37,43,0.08); flex: 0 0 auto; }
.crm-row .l1 { height: 7px; width: 88px; max-width: 100%; background: rgba(4,37,43,0.16); border-radius: 4px; }
.crm-row .l2 { height: 6px; width: 56px; background: rgba(4,37,43,0.08); border-radius: 4px; margin-top: 4px; }
.crm-badge { font-size: .58rem; font-weight: 600; padding: 3px 11px; border-radius: 999px; white-space: nowrap; }
.crm-badge.nuevo   { color: var(--green-4); background: rgba(59,213,139,0.16); }
.crm-badge.recur   { color: #5346c8; background: rgba(123,133,255,0.18); }
.crm-badge.riesgo  { color: #9a6b00; background: #fdf0d2; }
.crm-badge.perdido { color: #c0392b; background: rgba(231,76,60,0.12); }

/* Filas "Últimas operaciones" — estilo esqueleto */
.skm-ops { display: flex; flex-direction: column; gap: 8px; }
.skm-ops .ttl { font-size: .68rem; color: var(--skm-muted); margin-bottom: 2px; }
.skm-ops .r { display: grid; grid-template-columns: 1.6fr 1fr .55fr; gap: 12px; align-items: center; background: var(--skm-card); border: 1px solid var(--skm-line); border-radius: 10px; padding: 11px 14px; }
.skm-ops .r b { height: 7px; border-radius: 4px; background: rgba(4,37,43,0.13); display: block; }
.skm-ops .r b.s { background: rgba(4,37,43,0.07); }
.skm-ops .r b.g { background: var(--green); justify-self: end; width: 58%; }

/* Escenario para superponer mockups */
.skm-stage { position: relative; width: 100%; max-width: 980px; margin: 0 auto; }
.skm-stage .skm { box-shadow: 0 18px 40px rgba(6,46,53,0.10); }
.skm-float {
  position: absolute; right: -16px; bottom: -28px; width: 256px; z-index: 4;
  text-align: left;
  --skm-card: #ffffff;
  --skm-line: rgba(4,37,43,0.09);
  --skm-text: #04252b;
  --skm-muted: rgba(4,37,43,0.5);
}

/* Variante glass (transparente + blur) — usada en el hero */
.skm-stage.glass .skm {
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-color: rgba(255,255,255,0.75);
}
.skm-stage.glass .skm-bar { background: rgba(255,255,255,0.35); }
.skm-stage.glass .skm-side { background: rgba(255,255,255,0.28); }
.skm-stage.glass .skm-main { background: rgba(243,244,245,0.22); }
.skm-stage.glass .skm-stat,
.skm-stage.glass .skm-card-w,
.skm-stage.glass .skm-ops .r { background: rgba(255,255,255,0.45); border-color: rgba(255,255,255,0.6); }
.skm-stage.glass .skm-float .skm-order {
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-color: rgba(255,255,255,0.7);
}
.skm-float .skm-order { box-shadow: 0 22px 48px rgba(6,46,53,0.22); border-color: rgba(4,37,43,0.12); }

@media (max-width: 760px) {
  /* La comanda se superpone al dashboard (como en desktop), no apilada debajo */
  .skm-float { position: absolute; right: -6px; bottom: -22px; width: 196px; margin: 0; }
  .skm-float .skm-order { box-shadow: 0 16px 36px rgba(6,46,53,0.20); }
}
@media (max-width: 620px) {
  .skm-stat .v { font-size: 1.1rem; }
  .skm-app { grid-template-columns: 40px 1fr; }
}

/* Mini pantallas de teléfono — paso a paso "Cómo se usa" */
.step-visual.pho { background: #fafafa; border: 1px solid var(--border); overflow: hidden; display: flex; flex-direction: column; padding: 0; }
.pho-screen { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 11px 10px; min-height: 0; }
.pho-h { display: flex; align-items: center; gap: 7px; }
.pho-av { width: 22px; height: 22px; border-radius: 50%; background: var(--green); flex: 0 0 auto; }
.pho-tt { flex: 1; min-width: 0; }
.pho-t1, .pho-t2 { display: block; border-radius: 4px; }
.pho-t1 { height: 7px; width: 62%; background: rgba(4,37,43,0.20); }
.pho-t2 { height: 6px; width: 42%; background: rgba(4,37,43,0.10); margin-top: 4px; }
.pho-chips { display: flex; gap: 5px; }
.pho-chip { height: 14px; flex: 1; border-radius: 7px; background: rgba(4,37,43,0.07); }
.pho-chip.on { background: var(--green); flex: 0 0 34%; }
.pho-banner { height: 44px; border-radius: 9px; background: linear-gradient(120deg, var(--green), var(--green-3)); flex: 0 0 auto; }
.pho-card { display: flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 9px; padding: 7px 8px; background: #fff; }
.pho-thumb { width: 26px; height: 26px; border-radius: 7px; background: rgba(4,37,43,0.08); flex: 0 0 auto; }
.pho-lines { flex: 1; min-width: 0; }
.pho-price { font-size: .58rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.pho-radio { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(4,37,43,0.22); flex: 0 0 auto; }
.pho-radio.on { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 2px #fff; }
.pho-btn { margin-top: auto; height: 26px; border-radius: 8px; background: var(--green); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: .62rem; font-weight: 600; }
.pho-title { font-size: .62rem; font-weight: 600; color: var(--ink); text-align: center; }
.pho-badge { font-size: .5rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #9a6b00; background: #fdf0d2; border-radius: 5px; padding: 3px 6px; white-space: nowrap; }
.pho-ord { border: 1px solid var(--border); border-radius: 9px; padding: 9px; display: flex; flex-direction: column; gap: 7px; background: #fff; }
.pho-ord .line { display: flex; align-items: center; gap: 6px; }
.pho-ord .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); flex: 0 0 auto; }
.pho-note { background: rgba(59,213,139,0.12); border: 1px solid rgba(59,213,139,0.35); border-radius: 10px; padding: 11px 10px; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.pho-check { width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.pho-check svg { width: 16px; height: 16px; }
.pho-qrwrap { align-items: center; justify-content: center; gap: 10px; background: #fafafa; }
.pho-qr { width: 88px; height: 88px; padding: 9px; background: #fff; border: 1px solid var(--border); border-radius: 12px; }
.pho-qr svg { width: 100%; height: 100%; display: block; }
.pho-qrcap { font-size: .6rem; font-weight: 600; color: var(--green-3); }

/* =========================================================================
   EXPLORADOR DE TIPOS DE OPERACIÓN (vertical + esqueleto interactivo)
========================================================================= */
.op-explorer { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(24px, 4vw, 60px); align-items: center; margin-top: 10px; }
.op-list { display: flex; flex-direction: column; gap: 10px; }
.op-item {
  text-align: left; width: 100%; display: block;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 18px 20px; cursor: pointer;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.op-item:hover { border-color: var(--green-2); }
.op-item.active { border-color: var(--green); box-shadow: 0 10px 30px rgba(6,46,53,0.07); }
.op-item-head { display: flex; align-items: center; gap: 14px; }
.op-item .ic { width: 44px; height: 44px; border-radius: 13px; background: rgba(59,213,139,0.12); color: var(--green-3); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: background .3s var(--ease), color .3s var(--ease); }
.op-item.active .ic { background: var(--green); color: var(--ink); }
.op-item .ic svg { width: 22px; height: 22px; }
.op-item h4 { font-size: 1.08rem; }
.op-item .desc {
  display: block; max-height: 0; overflow: hidden; opacity: 0;
  font-size: .86rem; color: var(--muted); line-height: 1.5;
  transition: max-height .45s var(--ease), opacity .35s var(--ease), margin-top .45s var(--ease);
}
.op-item.active .desc { max-height: 130px; opacity: 1; margin-top: 12px; }

.op-stage { position: relative; min-height: 510px; }
.op-panel {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 2vw, 30px);
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.98);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
}
.op-panel.active { opacity: 1; visibility: visible; transform: none; }

/* Pantalla principal — marco sutil (estilo paso a paso) */
.op-phone { width: 244px; flex: 0 0 auto; background: #fff; border: 1px solid var(--border); border-radius: 28px; box-shadow: 0 22px 50px rgba(6,46,53,0.12); overflow: hidden; position: relative; }
.op-phone .bar { height: 24px; display: flex; align-items: center; justify-content: center; }
.op-phone .bar::before { content: ''; width: 46px; height: 5px; border-radius: 3px; background: rgba(4,37,43,0.12); }
.op-phone .pho-screen { padding: 2px 14px 18px; gap: 9px; }

/* Columna de widgets a la derecha */
.op-wcol { display: flex; flex-direction: column; gap: 14px; width: min(254px, 44%); }
.op-wcol .op-w:nth-child(2) { margin-left: 22px; }
.op-wcol .op-w:nth-child(3) { margin-left: -6px; }

.op-w { position: relative; width: 100%; background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 16px 40px rgba(6,46,53,0.12); padding: 13px 14px; }
.op-w .h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.op-w .h b { font-size: .82rem; }
.op-w .li { display: flex; align-items: center; gap: 8px; font-size: .76rem; color: var(--muted); padding: 3px 0; }
.op-w .li .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); flex: 0 0 auto; }
.op-w .lbl { font-size: .62rem; color: var(--muted); display: block; }
.op-w .val { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.op-w .pho-btn { margin-top: 10px; }
.op-w .pho-card { background: var(--bg); margin-top: 7px; }
.op-w .pho-card:first-of-type { margin-top: 0; }

/* Dashboard mini */
.op-dash .mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 9px; }
.op-dash .mini-stats > div { background: var(--bg); border-radius: 9px; padding: 7px 9px; }
.op-dash .v2 { font-size: .94rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.op-dash .mini-chart { width: 100%; height: 40px; display: block; }

/* Checkbox cuadrado */
.op-chk { width: 15px; height: 15px; border-radius: 4px; border: 2px solid rgba(4,37,43,0.22); flex: 0 0 auto; }
.op-chk.on { background: var(--green); border-color: var(--green); }

/* Total */
.op-tot { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; font-size: .72rem; color: var(--muted); }
.op-tot b { font-size: .92rem; color: var(--ink); }

/* WhatsApp */
.op-wpp .wh { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.op-wpp .wh .av { width: 24px; height: 24px; border-radius: 50%; background: #25D366; flex: 0 0 auto; }
.op-wpp .wh b { font-size: .78rem; }
.op-wpp .wh em { font-size: .6rem; font-style: normal; color: var(--green-3); }
.op-wpp .bub { background: rgba(59,213,139,0.12); border-radius: 11px; border-top-left-radius: 3px; padding: 9px 11px; font-size: .74rem; line-height: 1.4; color: var(--ink); }

/* Swipe retiro */
.op-swipe { display: flex; align-items: center; gap: 9px; background: var(--green); border-radius: 999px; padding: 6px; }
.op-swipe .knob { width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--green-3); display: flex; align-items: center; justify-content: center; font-weight: 700; flex: 0 0 auto; }
.op-swipe span { font-size: .7rem; font-weight: 600; color: var(--ink); }

/* Tótem — pantalla vertical tipo kiosko */
.op-totem { width: 270px; border-radius: 22px; }
.op-totem .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.op-totem .gcell { background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 8px; display: flex; flex-direction: column; gap: 5px; }
.op-totem .gcell .thumb { height: 36px; border-radius: 6px; background: rgba(4,37,43,0.08); }

/* Mobile: acordeón — cada panel (teléfono + widgets) se ubica debajo de su card.
   Los panels se reubican por JS dentro de .op-list. */
@media (max-width: 900px) {
  .op-explorer { display: block; margin-top: 4px; }
  .op-stage { display: none; }
  .op-list { gap: 12px; }
  .op-list > .op-panel {
    position: static; inset: auto; transform: none;
    max-height: 0; opacity: 0; visibility: hidden; overflow: hidden;
    display: flex; flex-direction: row; align-items: flex-start; justify-content: center; gap: 8px;
    transition: max-height .45s var(--ease), opacity .35s var(--ease), visibility .45s;
  }
  .op-list > .op-panel.active {
    max-height: 2000px; opacity: 1; visibility: visible; overflow: visible;
    margin: 2px 0 8px;
  }
  .op-list > .op-panel .op-phone { width: 134px; align-self: flex-start; }
  .op-list > .op-panel .op-totem { width: 142px; }
  .op-list > .op-panel .op-wcol {
    width: auto; flex: 1 1 auto; max-width: 184px;
    display: flex; flex-direction: column; gap: 9px;
  }
  .op-list > .op-panel .op-wcol .op-w { margin-left: 0 !important; width: 100%; }
}

/* =========================================================================
   CHATBOT WIDGET — "Skippy"
========================================================================= */
.skbot { position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); z-index: 1200; font-family: var(--font); }

/* Botón flotante */
.skbot-toggle {
  width: 60px; height: 60px;
  border: none;
  border-radius: 50%;
  background: var(--green);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(59,213,139,0.4), 0 4px 12px rgba(6,46,53,0.12);
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  position: relative;
}
.skbot-toggle:hover { transform: translateY(-2px) scale(1.04); }
.skbot-toggle svg { width: 27px; height: 27px; transition: transform .3s var(--ease), opacity .2s ease; position: absolute; }
.skbot-toggle .icon-close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.skbot.is-open .skbot-toggle .icon-chat { opacity: 0; transform: rotate(90deg) scale(.6); }
.skbot.is-open .skbot-toggle .icon-close { opacity: 1; transform: rotate(0) scale(1); }
.skbot-badge {
  position: absolute; top: -3px; right: -3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-size: .62rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg);
}

/* Panel */
.skbot-panel {
  position: absolute; bottom: 74px; right: 0;
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 120px));
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0; transform: translateY(12px) scale(.96);
  pointer-events: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.skbot.is-open .skbot-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* Header */
.skbot-head {
  background: var(--ink);
  color: #fff;
  padding: 16px 18px;
  display: flex; align-items: center; gap: 12px;
  position: relative; overflow: hidden;
}
.skbot-head::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 0%, rgba(59,213,139,0.22), transparent 60%);
  pointer-events: none;
}
.skbot-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--green); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative; z-index: 1;
}
.skbot-avatar svg { width: 20px; height: 20px; }
.skbot-head-txt { position: relative; z-index: 1; }
.skbot-head-txt h4 { font-size: .98rem; font-weight: 600; line-height: 1.2; color: #fff; }
.skbot-head-txt span { font-family: var(--font-mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; color: var(--green); display: inline-flex; align-items: center; gap: 6px; }
.skbot-head-txt span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(59,213,139,0.6); animation: skbot-pulse 2s infinite; }
@keyframes skbot-pulse { 0%{box-shadow:0 0 0 0 rgba(59,213,139,0.6);} 70%{box-shadow:0 0 0 6px rgba(59,213,139,0);} 100%{box-shadow:0 0 0 0 rgba(59,213,139,0);} }

/* Mensajes */
.skbot-msgs { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; background: var(--bg-soft); }
.skbot-msgs::-webkit-scrollbar { width: 6px; }
.skbot-msgs::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
.skbot-msg { max-width: 84%; padding: 11px 14px; border-radius: 16px; font-size: .9rem; line-height: 1.5; animation: skbot-in .3s var(--ease); }
@keyframes skbot-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.skbot-msg.bot { align-self: flex-start; background: var(--bg-card); border: 1px solid var(--border); color: var(--ink); border-bottom-left-radius: 5px; }
.skbot-msg.user { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 5px; }
.skbot-msg a { color: var(--green-3); font-weight: 500; }
.skbot-msg.user a { color: var(--green); }

/* Typing */
.skbot-typing { align-self: flex-start; display: flex; gap: 4px; padding: 13px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; border-bottom-left-radius: 5px; }
.skbot-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); animation: skbot-bounce 1.2s infinite; }
.skbot-typing span:nth-child(2) { animation-delay: .2s; }
.skbot-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes skbot-bounce { 0%,60%,100%{transform:translateY(0);opacity:.5;} 30%{transform:translateY(-5px);opacity:1;} }

/* Sugerencias */
.skbot-suggests { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 18px 12px; background: var(--bg-soft); }
.skbot-suggest {
  font-size: .8rem; padding: 7px 12px;
  background: var(--bg-card); border: 1px solid var(--border-2);
  border-radius: 999px; color: var(--ink); cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.skbot-suggest:hover { background: var(--green); border-color: var(--green); }

/* Input */
.skbot-form { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); background: var(--bg-card); }
.skbot-input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--font); font-size: .92rem; color: var(--ink); resize: none; max-height: 80px; line-height: 1.4; }
.skbot-input::placeholder { color: var(--muted-2); }
.skbot-send { width: 38px; height: 38px; flex-shrink: 0; border: none; border-radius: 50%; background: var(--green); color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .2s var(--ease), opacity .2s ease; }
.skbot-send:hover { transform: scale(1.08); }
.skbot-send:disabled { opacity: .4; cursor: default; transform: none; }
.skbot-send svg { width: 18px; height: 18px; }

.skbot-foot { text-align: center; font-size: .64rem; color: var(--muted-2); padding: 0 14px 10px; background: var(--bg-card); }

@media (max-width: 480px) {
  .skbot-panel { height: min(70vh, calc(100vh - 100px)); }
}

/* =========================================================================
   THEME TOGGLE (botón nav)
========================================================================= */
.theme-toggle {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  border: 1px solid var(--border);
  background: transparent;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  flex: 0 0 auto;
}
.theme-toggle:hover { background: rgba(6,46,53,0.06); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .ic-sun { display: none; }
html[data-theme="dark"] .theme-toggle .ic-moon { display: none; }
html[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
html[data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,0.10); }

/* =========================================================================
   DARK MODE — overrides de tokens + ajustes puntuales
   Estrategia: se invierten los tokens del "chrome" de la página, y dentro de
   los mockups (screenshots del producto) se re-declaran los tokens claros para
   que sigan viéndose como la app real.
========================================================================= */
html[data-theme="dark"] {
  --ink:    #E8EAF0;
  --ink-2:  #F3F4F8;
  --ink-3:  #FFFFFF;

  --bg:      #14161C;   /* gris oscuro tirando a azul muy oscuro */
  --bg-card: #1C1F27;
  --bg-soft: #181A21;
  --bg-deep: #0F1115;

  --border:   rgba(255,255,255,0.09);
  --border-2: rgba(255,255,255,0.15);
  --muted:    rgba(232,234,240,0.60);
  --muted-2:  rgba(232,234,240,0.40);

  --purple-bg: #1A1530;
}

/* =========================================================================
   MOCKUPS EN DARK — replican el dark mode real del backoffice
   (panel casi negro neutro, cards gris oscuro, texto claro, acentos verdes)
========================================================================= */
/* Dashboard / CRM (sistema --skm-*) */
html[data-theme="dark"] .skm {
  --skm-bg:    #15161A;
  --skm-panel: #0F1014;
  --skm-card:  #1C1E24;
  --skm-line:  rgba(255,255,255,0.09);
  --skm-text:  #E8EAF0;
  --skm-muted: rgba(232,234,240,0.55);
}
html[data-theme="dark"] .skm-float {
  --skm-card:  #1C1E24;
  --skm-line:  rgba(255,255,255,0.09);
  --skm-text:  #E8EAF0;
  --skm-muted: rgba(232,234,240,0.55);
}
html[data-theme="dark"] .skm-side i { background: rgba(255,255,255,0.12); }
html[data-theme="dark"] .skm-toggle { background: rgba(255,255,255,0.22); }
html[data-theme="dark"] .crm-row .av { background: rgba(255,255,255,0.10); }
html[data-theme="dark"] .crm-row .l1 { background: rgba(255,255,255,0.22); }
html[data-theme="dark"] .crm-row .l2 { background: rgba(255,255,255,0.10); }
html[data-theme="dark"] .skm-ops .r b { background: rgba(255,255,255,0.16); }
html[data-theme="dark"] .skm-ops .r b.s { background: rgba(255,255,255,0.08); }

/* Hero — frame de vidrio en versión oscura */
html[data-theme="dark"] .skm-stage.glass .skm { background: rgba(28,30,36,0.55); border-color: rgba(255,255,255,0.12); }
html[data-theme="dark"] .skm-stage.glass .skm-bar { background: rgba(255,255,255,0.04); }
html[data-theme="dark"] .skm-stage.glass .skm-side { background: rgba(255,255,255,0.03); }
html[data-theme="dark"] .skm-stage.glass .skm-main { background: rgba(15,16,20,0.35); }
html[data-theme="dark"] .skm-stage.glass .skm-stat,
html[data-theme="dark"] .skm-stage.glass .skm-card-w,
html[data-theme="dark"] .skm-stage.glass .skm-ops .r { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); }
html[data-theme="dark"] .skm-stage.glass .skm-float .skm-order { background: rgba(28,30,36,0.78); border-color: rgba(255,255,255,0.12); }

/* Teléfonos (.pho) + explorador de operaciones (.op) */
html[data-theme="dark"] .step-visual.pho { background: #0F1014; }
html[data-theme="dark"] .op-phone { background: #16181E; }
html[data-theme="dark"] .op-phone .bar::before { background: rgba(255,255,255,0.18); }
html[data-theme="dark"] .pho-card,
html[data-theme="dark"] .pho-ord { background: #1C1F27; }
html[data-theme="dark"] .op-w { background: #1C1F27; }
html[data-theme="dark"] .op-w .pho-card,
html[data-theme="dark"] .op-dash .mini-stats > div,
html[data-theme="dark"] .op-totem .gcell { background: rgba(255,255,255,0.05); }
html[data-theme="dark"] .pho-t1 { background: rgba(255,255,255,0.24); }
html[data-theme="dark"] .pho-t2 { background: rgba(255,255,255,0.13); }
html[data-theme="dark"] .pho-chip { background: rgba(255,255,255,0.09); }
html[data-theme="dark"] .pho-thumb,
html[data-theme="dark"] .op-totem .gcell .thumb { background: rgba(255,255,255,0.11); }
html[data-theme="dark"] .pho-radio,
html[data-theme="dark"] .op-chk { border-color: rgba(255,255,255,0.30); }
html[data-theme="dark"] .pho-qrwrap { background: #0F1014; }
/* El QR se mantiene claro (patrón oscuro sobre blanco, como un QR real) */

/* Widgets de SkipitAds y Marketing */
html[data-theme="dark"] .ads-w,
html[data-theme="dark"] .ads-phone,
html[data-theme="dark"] .mk-float { background: #1C1F27; }
html[data-theme="dark"] .ads-prod .th { background: rgba(255,255,255,0.07); }
html[data-theme="dark"] .ads-promo .tg { background: rgba(255,255,255,0.18); }
html[data-theme="dark"] .mk-bar .track { background: rgba(255,255,255,0.10); }

/* Botones/pills verdes dentro de mockups → texto oscuro (como en el BO) */
html[data-theme="dark"] .pho-btn,
html[data-theme="dark"] .skm-order .o-btn,
html[data-theme="dark"] .op-swipe span,
html[data-theme="dark"] .ads-saldo { color: #04252B; }

/* Navbar — glass oscuro */
html[data-theme="dark"] .nav { background: rgba(12,33,41,0.82); }
html[data-theme="dark"] .nav-item:hover { background: rgba(255,255,255,0.07); }

/* Hero — grilla blueprint visible sobre oscuro */
html[data-theme="dark"] .hero-grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
}

/* Logos de clientes — chip claro detrás para que conserven su color y se vean */
html[data-theme="dark"] .logo-slot.client {
  background: #fff;
  border-radius: 12px;
  padding: 8px 16px;
}
html[data-theme="dark"] .logo-slot.client img { filter: none; opacity: .85; }
html[data-theme="dark"] .logo-slot.client:hover img { opacity: 1; }

/* Swap de logo Skipit según tema (oscuro en claro / negativo en oscuro) */
.nav-logo .logo-dark,
.footer-logo .logo-dark { display: none; }
html[data-theme="dark"] .nav-logo .logo-light,
html[data-theme="dark"] .footer-logo .logo-light { display: none; }
html[data-theme="dark"] .nav-logo .logo-dark,
html[data-theme="dark"] .footer-logo .logo-dark { display: block; }

/* Sección Métricas + mapa en dark (igualar a la paleta del tema) */
html[data-theme="dark"] .metrics-section { background: linear-gradient(165deg, #181B22 0%, #0F1115 100%); }
html[data-theme="dark"] .metrics-map .leaflet-container { background: #0F1115; }
html[data-theme="dark"] .metrics-map .leaflet-popup-content-wrapper { background: #1C1F27; color: var(--ink); }
html[data-theme="dark"] .metrics-map .leaflet-popup-tip { background: #1C1F27; }

/* SkipitAds — fondo de sección oscuro violáceo */
html[data-theme="dark"] .ads-section { background: linear-gradient(180deg, #181233 0%, #120F24 100%); }

/* Chips/acentos que en claro eran "fill oscuro" → en oscuro pasan a verde */
html[data-theme="dark"] .tab-switcher button.active { background: var(--green); color: #04252B; }
html[data-theme="dark"] .btn-primary { background: var(--green); color: #04252B; }
html[data-theme="dark"] .btn-primary:hover { background: var(--green-hover); }
html[data-theme="dark"] .eyebrow .new { background: var(--green); color: #04252B; }

/* Tarjetas "highlight" que en claro eran teal sólido con texto blanco */
html[data-theme="dark"] .compare-col.good {
  background: #0F3038;
  border: 1px solid rgba(59,213,139,0.28);
}
html[data-theme="dark"] .compare-col.good h3 { color: var(--ink); }
html[data-theme="dark"] .integ-cta { background: #0F3038; }
html[data-theme="dark"] .integ-cta h3 { color: var(--ink); }
html[data-theme="dark"] .cta-final-card { background: #0F3038; }
html[data-theme="dark"] .cta-final-card h2 { color: var(--ink); }

/* Pills de marcas (SkipitAds) — sutiles sobre oscuro */
html[data-theme="dark"] .ads-brands span { background: rgba(255,255,255,0.06); border-color: rgba(131,118,255,0.35); color: var(--purple-2); }