:root {
  --clr-primary: #0066ff;
  --clr-primary-hover: #0052cc;
  --clr-bg-body: #0b1121;
  --clr-surface: #111b2e;
  --clr-text-main: #f8fafc;
  --clr-text-muted: #94a3b8;
  --clr-border: #1e293b;
  --clr-surface-dark: #0b1121;
  --clr-text-inverse: #f8fafc;
  --clr-border-dark: #1e293b;
  --clr-navbar-bg: rgba(17, 27, 46, 0.92);
  --clr-form-card-bg: #141e30;
  --clr-input-bg: #0f172a;
  --clr-erp: #ff3355;
  --clr-ecommerce: #346ed3;
  --clr-tpv: #10b981;
  --clr-crm: #a855f7;
  --clr-cms: #06b6d4;
  --space-layout: clamp(1rem, 3vw, 4rem);
  --space-gap: clamp(2rem, 4vw, 4rem);
  --fs-h1: clamp(2rem, 3.5vw, 2.8rem);
  --fs-body: clamp(1rem, 1.2vw, 1.15rem);
  --radius-xl: 32px;
  --radius-card: 24px;
  --shadow-soft:
    0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  --shadow-glow: 0 0 20px rgba(0, 102, 255, 0.15);
  --shadow-form: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --max-width: 1480px;
  --glass-bg: rgba(20, 30, 50, 0.45);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: blur(16px);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  font-family: Inter, system-ui, sans-serif;
  color: var(--clr-text-main);
  line-height: 1.6;
  background-color: var(--clr-bg-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  position: relative;
}

body:before {
  content: "";
  position: absolute;
  top: -10%;
  left: -10%;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(
    circle,
    rgba(0, 102, 255, 0.1) 0%,
    transparent 70%
  );
  filter: blur(100px);
  z-index: -1;
  animation: floatGlow1 20s ease-in-out infinite alternate;
}

body:after {
  content: "";
  position: absolute;
  bottom: 0%;
  right: -5%;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(
    circle,
    rgba(6, 182, 212, 0.08) 0%,
    transparent 70%
  );
  filter: blur(100px);
  z-index: -1;
  animation: floatGlow2 25s ease-in-out infinite alternate-reverse;
}

@keyframes floatGlow1 {
  0% {
    transform: translate(0) scale(1);
  }
  to {
    transform: translate(10%, 15%) scale(1.2);
  }
}

@keyframes floatGlow2 {
  0% {
    transform: translate(0) scale(1);
  }
  to {
    transform: translate(-15%, -10%) scale(1.1);
  }
}

h1,
h2,
h3 {
  color: var(--clr-text-main);
  line-height: 1.2;
}

h1 {
  font-family: Montserrat, sans-serif;
  font-size: var(--fs-h1);
  font-weight: 800;
}

h2 {
  font-family: Montserrat, sans-serif;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
}

h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 12px;
}

p {
  font-size: var(--fs-body);
  margin-bottom: 1rem;
}

.text-muted {
  color: var(--clr-text-muted);
}

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



.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--clr-primary);
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition:
    background var(--transition),
    transform var(--transition);
  text-decoration: none;
}

.btn-primary:hover {
  background: var(--clr-primary-hover);
  transform: translateY(-1px);
}





/* Botón "Ver precios" ghost (cristal) — réplica del CTA intermedio, usado en los hero */
.btn-precios-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 2rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease, border-color .25s ease, background-color .25s ease;
}

.btn-precios-ghost:hover {
  transform: translateY(-3px);
  border-color: #fff;
  background: rgba(255, 255, 255, 0.20);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.30);
}

.btn-precios-ghost__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

.btn-precios-ghost:hover .btn-precios-ghost__icon {
  transform: rotate(-12deg) scale(1.12);
}

/* En el hero empareja altura con el btn-primary agrandado (padding 1.2rem / fuente 1.1rem) */
.hero__cta-group .btn-precios-ghost {
  padding: calc(1.2rem - 1px) 2rem;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
}

@media (prefers-reduced-motion: reduce) {
  .btn-precios-ghost,
  .btn-precios-ghost__icon { transition: none; }
  .btn-precios-ghost:hover { transform: none; }
  .btn-precios-ghost:hover .btn-precios-ghost__icon { transform: none; }
}

/* ═══ Botón "Solicitar demo gratuita": gradient + shine + pulso del CTA INTERMEDIO ═══ */
/* Mismos valores que #cta-intermedio .btn-primary, SIN padding/font para respetar el
   tamaño de cada contexto (navbar, hero, cta-final, métricas, precios…). */
.btn-cta-pulse {
  background: linear-gradient(135deg, #06f, #00c6ff);
  box-shadow: 0 8px 32px #0066ff73, 0 0 0 1px #ffffff1f;
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
  animation: ctaBtnPulse 3s ease-in-out infinite;
}

.btn-cta-pulse::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, .2) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}

.btn-cta-pulse:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px #0066ff8c, 0 0 0 1px #ffffff2e;
}

.btn-cta-pulse:hover::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .btn-cta-pulse { animation: none; }
}


.section-glass-white {
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
  color: #0f172a;
  position: relative;
  overflow: hidden;
}

.section-glass-white h2,
.section-glass-white h3 {
  color: #0f172a;
}

.section-glass-white p {
  color: #0f172a;
}

.section-glass-dark {
  background: #0b112199;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  position: relative;
}

.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #0b1121b3;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  transition: all var(--transition);
  padding: 1.2rem 0;
}

.navbar.scrolled {
  box-shadow: 0 4px 20px #0000001a;
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar__logo img {
  height: 32px;
}

.navbar__links {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.navbar__links a {
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  font-size: 0.95rem;
  transition: color var(--transition);
}

.navbar__links a:hover {
  color: var(--clr-primary);
}

.mobile-menu-toggle {
  display: none;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 101;
}

@media (max-width: 900px) {
  .mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .navbar__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #0f172a;
    flex-direction: column;
    padding: 2rem;
    gap: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 30px rgba(0,0,0,0.5);
    transform: translateY(-20px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 99;
  }

  .navbar__links.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  
  .navbar__links a.btn-primary {
    width: 100%;
    margin-top: 0.5rem;
  }
}

.footer {
  padding: 80px 0 40px;
  background: var(--clr-bg-body);
  border-top: 1px solid var(--clr-border);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 4rem;
  margin-bottom: 4rem;
}

.footer__logo img {
  height: 32px;
  margin-bottom: 1.5rem;
}

.footer__col h4 {
  margin-bottom: 1.5rem;
  font-weight: 700;
  color: var(--clr-text-main);
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
}

.footer__col ul {
  list-style: none;
}

.footer__col ul li {
  margin-bottom: 0.75rem;
}

.footer__col ul li a {
  text-decoration: none;
  color: var(--clr-text-muted);
  font-size: 0.95rem;
  transition: color var(--transition);
}

.footer__col ul li a:hover {
  color: var(--clr-primary);
}

.footer__bottom {
  padding-top: 2rem;
  border-top: 1px solid var(--clr-border);
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--clr-text-muted);
}

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

@media (max-width: 600px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
  .footer__bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}

/* ERP Specific classes merged from erp CSS */

.hero {
  padding: 120px 0 80px;
  text-align: center;
  min-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__eyebrow {
  color: var(--clr-primary);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.hero h1 {
  margin-bottom: 2rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.hero h1 span {
  background: linear-gradient(135deg, var(--clr-primary) 0%, #00c6ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.hero__subtitle {
  font-size: 1.2rem;
  color: var(--clr-text-muted);
  max-width: 800px;
  margin: 0 auto 3rem;
}

.hero__cta-group {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 3rem;
}

.hero__badge {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--clr-text-muted);
}

.hero__badge span:before {
  content: "✓";
  color: var(--clr-primary);
  margin-right: 0.5rem;
  font-weight: 700;
}

.problem {
  padding: 100px 0;
}

/* --- ECOMMERCE BENTO PROBLEM GRID --- */
.eco-bento-section {
  padding: 120px 0;
  background-color: #f8fafc;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.eco-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.eco-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.eco-card-span-2 {
  grid-column: span 2;
}



.eco-card:hover {
  transform: translateY(-5px);
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.eco-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.05), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.eco-card:hover::before {
  opacity: 1;
}

.eco-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}

.icon-danger {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.1);
}

.icon-warning {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.2);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.1);
}

.icon-success {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.2);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.1);
}

.eco-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 1rem;
  line-height: 1.3;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: -0.5px;
}

.eco-card p {
  color: #475569;
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 0;
}

.eco-visual-container {
  margin-top: 2rem;
  flex-grow: 1;
  position: relative;
  border-radius: 12px;
  background: #f1f5f9;
  border: 1px solid rgba(0,0,0,0.05);
  overflow: hidden;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stock-conflict-ui {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.sc-tag {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: center;
  border: 1px solid rgba(0,0,0,0.08);
  background: #ffffff;
  min-width: 120px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

.sc-tag.danger-tag {
  border-color: rgba(239, 68, 68, 0.2);
  background: rgba(239, 68, 68, 0.05);
}

.sc-label {
  font-size: 0.7rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sc-value {
  color: #0f172a;
  font-size: 1.1rem;
}

.sc-value.danger { color: #ef4444; text-decoration: line-through; }
.sc-value.success { color: #10b981; }

.sc-bolt {
  color: #ef4444;
  animation: pulse-danger 1.5s infinite;
}

@keyframes pulse-danger {
  0%, 100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 5px rgba(239, 68, 68, 0.3)); }
  50% { opacity: 0.4; transform: scale(1.1); filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.5)); }
}

@media (max-width: 992px) {
  .stock-conflict-ui {
    gap: 0.35rem;
    transform: none;
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
    justify-content: center;
  }
  .sc-tag {
    padding: 0.4rem 0.4rem;
    min-width: 0;
    flex: 1;
  }
  .sc-label {
    font-size: 0.55rem;
  }
  .sc-value {
    font-size: 0.75rem;
  }
  .sc-bolt {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }
}

.solution-banner {
  background: linear-gradient(135deg, rgba(52, 110, 211, 0.05), rgba(16, 185, 129, 0.05));
  border-color: rgba(52, 110, 211, 0.2);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3rem;
  padding: 3rem;
  background-color: #ffffff;
}

.solution-banner:hover {
  border-color: rgba(52, 110, 211, 0.4);
  box-shadow: 0 20px 40px rgba(52, 110, 211, 0.1);
}

.sol-content {
  flex: 1;
}

.sol-visual {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
}

.solution-banner.desktop-only {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2.5rem !important;
}

.solution-banner.desktop-only .sol-content {
  width: 100% !important;
  flex: none !important;
}

.solution-banner.desktop-only .sol-visual {
  width: 100% !important;
  flex: none !important;
  margin-top: 1rem !important;
}

.network-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
}

.net-node {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.1);
  padding: 0.8rem 1.2rem;
  border-radius: 12px;
  font-weight: 600;
  color: #334155;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  position: relative;
  z-index: 2;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.net-node.core {
  background: linear-gradient(135deg, #1e3a8a, #0f172a);
  color: white;
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.25);
  padding: 1rem 1.5rem;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}

.net-node.core img {
  height: 28px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.net-line {
  height: 4px;
  flex-grow: 1;
  position: relative;
  min-width: 30px;
  overflow: hidden;
  border-radius: 99px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Custom gradients for left and right lines on desktop */
.solution-banner.desktop-only .net-line:nth-of-type(1) {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.2) 0%, rgba(30, 58, 138, 0.2) 100%) !important;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.1) !important;
}

.solution-banner.desktop-only .net-line:nth-of-type(2) {
  background: linear-gradient(90deg, rgba(30, 58, 138, 0.2) 0%, rgba(16, 185, 129, 0.2) 100%) !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.1) !important;
}

.data-packet {
  position: absolute;
  top: 0;
  left: 0;
  width: 75px;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(52, 110, 211, 0.2) 30%, #346ed3 70%, #ffffff 100%);
  animation: flow-right 2s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  box-shadow: 0 0 15px rgba(52, 110, 211, 0.95), 0 0 6px #ffffff;
}

.data-packet.reverse {
  position: absolute;
  top: 0;
  left: 0;
  width: 75px;
  height: 100%;
  background: linear-gradient(90deg, #ffffff 0%, #10b981 30%, rgba(16, 185, 129, 0.2) 70%, transparent 100%);
  animation: flow-left 2s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.95), 0 0 6px #ffffff;
}

@keyframes flow-right { 0% { left: -75px; } 100% { left: 100%; } }
@keyframes flow-left { 0% { left: 100%; } 100% { left: -75px; } }

@media (max-width: 900px) {
  .eco-bento-grid {
    grid-template-columns: 1fr;
  }
  .eco-card-span-2, .eco-card-span-3 {
    grid-column: span 1;
  }
  .solution-banner {
    flex-direction: column;
    padding: 2rem;
  }
  .network-visual {
    flex-direction: column;
    gap: 0;
  }
  .net-line {
    width: 2px;
    min-width: 2px;
    min-height: 40px;
    height: auto;
  }
  .data-packet, .data-packet.reverse {
    width: 4px;
    height: 40px;
    top: 0;
    left: -1px;
  }
  .data-packet {
    background: linear-gradient(180deg, transparent, #10b981, transparent);
    animation: flow-down 2s linear infinite;
  }
  .data-packet.reverse {
    background: linear-gradient(180deg, transparent, #346ed3, transparent);
    animation: flow-up 2.5s linear infinite;
  }
}

@keyframes flow-down { 0% { top: -40px; } 100% { top: 100%; } }
@keyframes flow-up { 0% { top: 100%; } 100% { top: -40px; } }

/* --- Copy & Paste Animation --- */
.copy-paste-ui {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 1.5rem;
  position: relative;
  height: 100%;
}

.cp-window {
  width: 42%;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.02);
  z-index: 1;
}

.cp-header {
  font-size: 0.55rem;
  font-weight: 700;
  color: #fff;
  padding: 4px 8px;
  letter-spacing: 0.5px;
}
.cp-left .cp-header { background: #10b981; }
.cp-right .cp-header { background: #346ed3; }

.cp-body {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cp-line, .cp-field {
  height: 8px;
  border-radius: 4px;
  background: #e2e8f0;
}
.cp-line.active {
  background: #cbd5e1;
  border: 1px dashed #94a3b8;
  animation: cp-flash 3s infinite;
}

.cp-field.target {
  background: #f1f5f9;
  border: 1px dashed #cbd5e1;
  position: relative;
  overflow: hidden;
}
.cp-field.target::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: #94a3b8;
  animation: field-fill 3s infinite;
}

.cp-animation-area {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  pointer-events: none;
  z-index: 10;
}

.cp-pointer {
  position: absolute;
  top: 50%; left: 30%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 4px;
  animation: cp-move 3s infinite ease-in-out;
}

.cp-badge-container {
  position: relative;
  width: 50px; height: 18px;
}

.cp-badge {
  position: absolute;
  top: 0; left: 0;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.badge-c {
  background: #346ed3;
  animation: badge-c-anim 3s infinite;
}
.badge-v {
  background: #f59e0b;
  animation: badge-v-anim 3s infinite;
}

@keyframes cp-move {
  0%, 15% { left: 30%; top: 45%; }
  35%, 65% { left: 70%; top: 65%; }
  85%, 100% { left: 30%; top: 45%; }
}

@keyframes badge-c-anim {
  0%, 20% { opacity: 1; transform: scale(1); }
  25%, 100% { opacity: 0; transform: scale(0.9); }
}

@keyframes badge-v-anim {
  0%, 40% { opacity: 0; transform: scale(0.9); }
  45%, 70% { opacity: 1; transform: scale(1); }
  75%, 100% { opacity: 0; transform: scale(0.9); }
}

@keyframes cp-flash {
  0%, 10% { background: #e2e8f0; }
  15%, 85% { background: #cbd5e1; }
  90%, 100% { background: #e2e8f0; }
}

@keyframes field-fill {
  0%, 45% { width: 0%; }
  55%, 80% { width: 100%; }
  85%, 100% { width: 0%; }
}

/* --- Price Desync Animation --- */
.price-desync-ui {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
}

.price-tag {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 0.75rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.02);
  min-width: 90px;
  position: relative;
}

.pt-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 4px;
}

.pt-price-container {
  position: relative;
  height: 28px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pt-price {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
}

.pt-price.old {
  position: absolute;
  animation: pt-fade-out 4s infinite;
}
.pt-price.new {
  position: absolute;
  color: #10b981;
  animation: pt-fade-in 4s infinite;
}

.pt-price.stuck {
  color: #0f172a;
}

.pt-loss-badge {
  position: absolute;
  bottom: -12px;
  background: #ef4444;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(239, 68, 68, 0.3);
  animation: pt-fade-in 4s infinite;
  white-space: nowrap;
}

.pt-divider {
  color: #94a3b8;
  position: relative;
}
.pt-slash {
  stroke: #ef4444;
  stroke-dasharray: 25;
  stroke-dashoffset: 25;
  animation: pt-draw-slash 4s infinite;
}

@keyframes pt-fade-out {
  0%, 15% { opacity: 1; transform: translateY(0); }
  25%, 85% { opacity: 0; transform: translateY(-10px); }
  95%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes pt-fade-in {
  0%, 15% { opacity: 0; transform: translateY(10px); }
  25%, 85% { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; transform: translateY(10px); }
}

@keyframes pt-draw-slash {
  0%, 20% { stroke-dashoffset: 25; opacity: 0; }
  25%, 85% { stroke-dashoffset: 0; opacity: 1; }
  95%, 100% { stroke-dashoffset: 25; opacity: 0; }
}











/* --- ERP BENTO GRID --- */
.erp-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.bento-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.02);
  color: #0f172a;
}

.bento-span-7 { grid-column: span 7; }
.bento-span-5 { grid-column: span 5; }
.bento-span-4 { grid-column: span 4; }
.bento-span-12 { grid-column: span 12; }

.bento-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--b-color) 30%, transparent);
  box-shadow: 0 20px 40px color-mix(in srgb, var(--b-color) 6%, transparent);
}

/* --- CAROUSEL DOTS --- */
.bento-carousel-dots {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 2rem;
}

.bento-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #cbd5e1;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bento-dot.active {
  width: 24px;
  background: var(--active-color, #0ea5e9);
}

.bento-card-header-flex {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.bento-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--b-color) 10%, transparent);
  color: var(--b-color);
  border: 1px solid color-mix(in srgb, var(--b-color) 20%, transparent);
  transition: transform 0.3s ease;
}

.bento-card:hover .bento-icon-wrapper {
  transform: scale(1.1) rotate(5deg);
}

.bento-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a !important;
  margin-bottom: 0;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: -0.5px;
}

.bento-card p {
  color: #475569 !important;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0;
  margin-top: 0.5rem;
  text-align: left;
}

.bento-visual {
  margin-top: 1.75rem;
  flex-grow: 1;
  position: relative;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid rgba(0,0,0,0.05);
  overflow: hidden;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- MINI VISUALIZATIONS --- */

/* Mini Invoice */






@keyframes badge-flicker {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}







/* Mini Stock */
.mini-stock-visual {
  width: 80%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mini-stock-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  font-weight: 700;
  color: #64748b;
}

.mini-stock-num {
  color: #f59e0b;
}

.mini-stock-progress {
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.mini-stock-fill {
  height: 100%;
  background: #f59e0b;
  border-radius: 4px;
  animation: stock-fill-anim 3s infinite ease-in-out alternate;
}

@keyframes stock-fill-anim {
  0% { width: 30%; background: #ef4444; }
  100% { width: 80%; background: #f59e0b; }
}

/* Mini Project */
.mini-project-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.mini-project-circle {
  position: relative;
  width: 60px;
  height: 60px;
}

.circle-svg {
  transform: rotate(-90deg);
}

.circle-bg {
  fill: none;
  stroke: #e2e8f0;
  stroke-width: 3.8;
}

.circle-fill {
  fill: none;
  stroke: #a855f7;
  stroke-width: 3.8;
  stroke-linecap: round;
  animation: progress-dash 4s infinite alternate ease-in-out;
}

@keyframes progress-dash {
  0% { stroke-dasharray: 20, 100; }
  100% { stroke-dasharray: 85, 100; }
}

.circle-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.75rem;
  font-weight: 800;
  color: #a855f7;
}

.mini-project-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Mini Sales */
.mini-sales-visual {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mini-trend-svg {
  overflow: visible;
}

.trend-path {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: trend-draw 4s infinite alternate ease-in-out;
}

@keyframes trend-draw {
  0% { stroke-dashoffset: 120; }
  100% { stroke-dashoffset: 0; }
}

/* Mini Due */
.mini-due-visual {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.due-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

.due-day {
  font-size: 1rem;
  font-weight: 800;
  color: #0f172a;
  padding: 6px 12px 2px;
}

.due-month {
  font-size: 0.55rem;
  font-weight: 700;
  color: white;
  background: #3b82f6;
  padding: 2px 12px;
  width: 100%;
  text-align: center;
}

.due-status {
  font-size: 0.7rem;
  font-weight: 800;
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  padding: 4px 8px;
  border-radius: 6px;
  animation: due-glow 2s infinite ease-in-out;
}

@keyframes due-glow {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.2); }
  50% { transform: scale(1.05); box-shadow: 0 0 8px 2px rgba(16, 185, 129, 0.2); }
}

/* Mini Reports */
.mini-reports-visual {
  width: 90%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 100px;
}

.report-bar-group {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  height: 100%;
}

.report-bar {
  width: 24px;
  background: #f43f5e;
  border-radius: 4px 4px 0 0;
  transform-origin: bottom;
  animation: bar-grow 2.5s infinite alternate ease-in-out;
  animation-delay: var(--delay);
}

@keyframes bar-grow {
  0% { transform: scaleY(0.3); }
  100% { transform: scaleY(1); }
}

@media (max-width: 1024px) {
  .erp-bento {
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25rem;
  }
  .bento-span-4,
  .bento-span-5,
  .bento-span-7 {
    grid-column: span 6;
  }
  .bento-span-12 {
    grid-column: span 12;
  }
  .bento-card {
    padding: 1.5rem;
  }
}

@media (max-width: 768px) {
  .erp-bento {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */

    /* Bleed exacto: el contenedor llega justo al borde de la pantalla */
    margin-left: calc(-1 * var(--space-layout));
    margin-right: calc(-1 * var(--space-layout));
    /* Padding lateral = (100vw - ancho card)/2 → la 1ª card queda CENTRADA
       y deja asomar la siguiente por la derecha */
    padding-left: 10vw;
    padding-right: 10vw;
    padding-top: 1rem;
    padding-bottom: 2rem;
    gap: 1.25rem;
  }

  .erp-bento::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
  }

  .bento-card {
    scroll-snap-align: center;
    flex: 0 0 80vw;
    max-width: 80vw;
    height: auto;
  }

  /* Móvil: el hover táctil no aplica; el efecto pasa a la card centrada del slider */
  .erp-bento .bento-card:hover {
    transform: none;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  }

  .erp-bento .bento-card:hover .bento-icon-wrapper {
    transform: none;
  }

  .erp-bento .bento-card.is-focus {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--b-color) 30%, transparent);
    box-shadow: 0 20px 40px color-mix(in srgb, var(--b-color) 6%, transparent);
  }

  .erp-bento .bento-card.is-focus .bento-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
  }
  
  .bento-carousel-dots {
    display: flex;
  }
}


.bento-ecosystem {
  background: linear-gradient(135deg, #0a1628, #0d1f45);
  padding: 5rem 0;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ecosystem-label {
  font-size: 0.85rem;
  color: #38bdf8;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.ecosystem-title {
  font-size: 2rem;
  color: #fff;
  margin-bottom: 3rem;
  font-weight: 700;
}

.ecosystem-pipeline {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3.5rem;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  padding: 2.5rem 0;
}

.eco-connector {
  display: none !important;
}

@media (min-width: 993px) {
  /* Cable de fibra óptica base en PC */
  .ecosystem-pipeline::before {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 0;
  }

  /* Pulso de luz animado en PC */
  .ecosystem-pipeline::after {
    content: '';
    position: absolute;
    left: 8%;
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #ff3355, #3b82f6, #0bf597, #8b5cf6, #06b6d4, transparent);
    border-radius: 4px;
    z-index: 1;
    animation: flowPulseHorizontal 4s infinite linear;
    filter: drop-shadow(0 0 10px rgba(255, 51, 85, 0.8));
  }
}

@keyframes flowPulseHorizontal {
  0% { left: 8%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: calc(100% - 8% - 120px); opacity: 0; }
}

.bento-ecosystem .module-pill {
  padding: 1.2rem 2rem 1.2rem 2.2rem;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  z-index: 2;
}

.bento-ecosystem .module-pill svg {
  color: var(--pill-color) !important;
  margin-right: 14px !important;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}



.bento-ecosystem .module-pill:hover,
.bento-ecosystem .module-pill.active {
  border-color: color-mix(in srgb, var(--pill-color, #06b6d4) 40%, rgba(255,255,255,0.15));
  color: #ffffff;
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.3),
    0 0 20px color-mix(in srgb, var(--pill-color, #06b6d4) 30%, transparent),
    inset 0 1px #ffffff26;
  transform: translateY(-3px);
}

.cta-final-light {
  padding: 80px 0 100px;
  background: #f8fafc;
  text-align: center;
  position: relative;
  overflow: hidden;
}







.hero__cta-group .btn-primary {
  background: linear-gradient(135deg, #06f, #00c6ff);
  box-shadow:
    0 8px 32px #0066ff73,
    0 0 0 1px #ffffff1f;
  padding: 1.2rem 3.5rem;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.hero__cta-group .btn-primary:before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.2) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

.hero__cta-group .btn-primary:hover {
  transform: translateY(-3px);
  box-shadow:
    0 14px 40px #0066ff8c,
    0 0 0 1px #ffffff2e;
}

.hero__cta-group .btn-primary:hover:before {
  opacity: 1;
}





.cta-trust-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.cta-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #ffffff0d;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  color: #94a3b8;
  line-height: 1;
}

.cta-trust-pill svg {
  color: #06f;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .cta-panel {
    padding: 2.5rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .cta-panel {
    padding: 2rem 1rem;
  }
  .cta-panel .btn-primary {
    width: 100%;
    padding: 1.2rem 1.5rem;
  }
  .cta-trust-pills {
    gap: 0.4rem;
  }
  .cta-trust-pill {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
  }
}

@keyframes ctaBtnPulse {
  0%,
  to {
    box-shadow: 0 0 #0066ff80;
  }
  50% {
    box-shadow: 0 0 0 10px #06f0;
  }
}



/* CTA Image Section Button */
.cta-image-section .btn-primary {
  background: linear-gradient(135deg, #06f, #00c6ff);
  box-shadow:
    0 8px 32px #0066ff73,
    0 0 0 1px #ffffff1f;
  padding: 1.2rem 3.5rem;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  animation: ctaBtnPulse 3s ease-in-out infinite;
}

.cta-image-section .btn-primary:before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.2) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

.cta-image-section .btn-primary:hover {
  transform: translateY(-3px);
  box-shadow:
    0 14px 40px #0066ff8c,
    0 0 0 1px #ffffff2e;
}

.cta-image-section .btn-primary:hover:before {
  opacity: 1;
}





/* =========================================
   eCommerce Visual (S4)
   ========================================= */






















































/* =========================================
   TPV Visual (S4)
   ========================================= */


































/* =========================================
   CRM Visual (S4)
   ========================================= */

























/* =========================================
   CMS Visual (S4)
   ========================================= */






.cms-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #475569;
}
.cms-dot:nth-child(1) {
  background: #ef4444;
}
.cms-dot:nth-child(2) {
  background: #f59e0b;
}
.cms-dot:nth-child(3) {
  background: #10b981;
}











.cms-sidebar {
  width: 140px;
  background: rgba(15, 23, 42, 0.4);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  padding: 1rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}





.cms-canvas {
  flex-grow: 1;
  padding: 1.5rem;
  background: #f8fafc;
  position: relative;
  overflow: hidden;
}















/* =========================================
   S3 Problema - Customer Journey (eCommerce)
   ========================================= */
























/* =========================================
   S3 Problema - Split Screen (TPV, CRM, CMS)
   ========================================= */


.problem-eyebrow {
  color: #8f9ba8;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
}







.split-col-title {
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
  margin: 0;
  letter-spacing: -0.5px;
}



































.solution {
  padding: 100px 0;
  background-color: var(--clr-bg-body);
}















@media (max-width: 1024px) {
  .solution__layout {
    gap: 2rem;
  }
}

@media (max-width: 900px) {
  .hero {
    padding-top: 80px;
  }
  .hero__cta-group {
    flex-direction: column;
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
  .btn-primary,
  .btn-secondary,
  .btn-precios-ghost {
    width: 100%;
  }
  .solution__layout {
    grid-template-columns: 1fr;
  }
  .solution__visual {
    order: -1;
  }
}

@media (max-width: 768px) {
  .ecosystem-pipeline {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    gap: 1rem;
    padding-bottom: 1rem;
    padding-left: 5vw; /* Adds space before first element */
    padding-right: 5vw; /* Adds space after last element */
    margin-left: -20px; /* Counter container padding if needed */
    margin-right: -20px;
    /* Unset desktop specific styles */
    max-width: 100vw;
  }
  
  .ecosystem-pipeline::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .bento-ecosystem .module-pill {
    flex-shrink: 0;
    scroll-snap-align: center;
  }

  .eco-connector {
    display: none !important;
  }
}

/* =========================================
   Fase 4: Bento Grids Avanzados (S5) Mini-Visuales
   ========================================= */


/* RGB Fallbacks where CSS vars don't have RGB versions easily. We'll use currentColor or specific colors in the HTML if needed. But the wrapper has a border. Let's make it simpler: */



/* eCommerce - Truck */


@keyframes driveTruck {
  0% {
    left: -30px;
  }
  40%,
  60% {
    left: calc(50% - 12px);
  }
  100% {
    left: calc(100% + 30px);
  }
}

/* eCommerce - Stock Chart */







@keyframes fluctuateStock {
  0% {
    transform: scaleY(0.8);
  }
  100% {
    transform: scaleY(1.2);
  }
}

/* TPV - Receipt */






@keyframes printReceipt {
  0% {
    transform: translateY(-20px) scaleY(0);
    opacity: 0;
  }
  20% {
    transform: translateY(0) scaleY(1);
    opacity: 1;
  }
  80% {
    transform: translateY(0) scaleY(1);
    opacity: 1;
  }
  100% {
    transform: translateY(20px) scaleY(1);
    opacity: 0;
  }
}

/* TPV - Touch Interface */





@keyframes pulseTouch {
  0%,
  100% {
    background: #e2e8f0;
  }
  10%,
  20% {
    background: var(--b-color);
    box-shadow: 0 0 8px var(--b-color);
  }
}

/* CRM - Funnel */






@keyframes fillFunnel {
  0%,
  10% {
    background: #e2e8f0;
  }
  30%,
  100% {
    background: var(--b-color);
  }
}

/* CRM - Email */


@keyframes sendEmail {
  0%,
  20% {
    transform: scale(1) translateX(0);
    opacity: 1;
  }
  40% {
    transform: scale(0.9) translateX(-10px);
    opacity: 1;
  }
  60% {
    transform: scale(1.1) translateX(30px);
    opacity: 0;
  }
  80%,
  100% {
    transform: scale(1) translateX(-20px);
    opacity: 0;
  }
}

/* CMS - Cursor */


@keyframes moveCursor {
  0% {
    top: 20px;
    left: 20px;
    opacity: 0;
  }
  20% {
    top: 10px;
    left: 5px;
    opacity: 1;
  }
  30% {
    transform: scale(0.8);
  }
  40% {
    transform: scale(1);
  }
  60% {
    top: 10px;
    left: 25px;
  }
  100% {
    top: 30px;
    left: 30px;
    opacity: 0;
  }
}

/* CMS - Publish */


@keyframes publishBtn {
  0%,
  20% {
    width: 40px;
    border-radius: 8px;
    background: #e2e8f0;
  }
  30%,
  60% {
    width: 40px;
    border-radius: 8px;
    background: var(--b-color);
    transform: scale(0.95);
  }
  80%,
  100% {
    width: 16px;
    border-radius: 50%;
    background: #10b981;
  }
}

/* ============================================
   CMS/TPV S5 — Hero card layout
   ============================================ */








@media (max-width: 900px) {
  .erp-bento--hero-layout {
    grid-template-areas:
      "fact"
      "alm"
      "proy"
      "venta"
      "cobro";
    grid-template-columns: 1fr;
  }
  .bento-card--hero {
    grid-column: span 1;
    flex-direction: column;
    text-align: center;
    padding: 2rem 2rem 4rem;
  }
  .bento-card--hero .bento-hex-icon {
    margin: 0 auto 1.5rem;
    width: 80px;
    height: 80px;
  }
}

/* ============================================
   CRM S5 — Timeline de Ventas
   ============================================ */
















@media (max-width: 600px) {
  .crm-timeline__step {
    flex-direction: column;
    gap: 1rem;
  }
  .crm-timeline::before {
    left: 24px;
  }
  .crm-timeline__node {
    margin-left: 0;
  }
}

/* ============================================
   eCommerce S5 — Flow Diagram
   ============================================ */




















@keyframes flowPulse {
  0% {
    left: 0;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}















@media (max-width: 900px) {
  .ec-flow-container {
    gap: 2rem;
  }

  /* Timeline Vertical (Cards stacked with connectors between) */
  .ec-flow {
    flex-direction: column;
    gap: 0;
    align-items: center;
  }

  .ec-flow-node {
    width: 100%;
    max-width: 320px;
  }

  .ec-flow-connector {
    display: block;
    width: 2px;
    height: 40px;
    min-width: 2px;
    background: #1e293b;
    position: relative;
    margin: 0 auto;
  }

  .ec-flow-connector::after {
    content: "";
    position: absolute;
    top: 0;
    left: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--page-accent, #f97316);
    box-shadow: 0 0 10px var(--page-accent, #f97316);
    animation: flowPulseVertical 2s linear infinite;
  }

  @keyframes flowPulseVertical {
    0% { top: 0; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
  }

  /* Carousel Horizontal para los Extras (Estilo CMS) */
  .ec-extras-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 0.5rem;
    margin-top: 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }
  
  .ec-extras-grid::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .ec-extra-card {
    flex: 0 0 85%;
    scroll-snap-align: center;
    max-width: 320px;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
  }

  .ec-extra-icon {
    width: 48px;
    height: 48px;
    background: color-mix(in srgb, var(--page-accent, #f97316) 10%, transparent);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
  }

  .ec-extra-card h4 {
    margin-bottom: 0.5rem;
  }

  /* Puntos del Slider (eCommerce) */
  .ec-slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 0.5rem;
  }
  .ec-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(52, 110, 211, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
  }
  .ec-dot.active {
    background: #346ed3; /* var(--page-accent) or #346ed3 */
    width: 24px;
    border-radius: 4px;
  }
}

/* Feature Tabs (e.g. TPV S5) */




.feature-tab-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  color: var(--clr-text-muted);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all var(--transition);
}

.feature-tab-btn:hover {
  background: rgba(255, 255, 255, 0.03);
  color: var(--clr-text-main);
}

.feature-tab-btn.active {
  background: var(--tab-accent-bg);
  border-left-color: var(--tab-accent);
  color: var(--clr-text-main);
}

.feature-tab-btn svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  opacity: 0.7;
  transition: all var(--transition);
}

.feature-tab-btn.active svg {
  opacity: 1;
  fill: var(--tab-accent);
}



.feature-tab-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 3rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
}

.feature-tab-content.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}









/* Tab Mockup UI for visual skeleton */
/* Tab Mockup UI for visual skeleton */














/* --- Specific Animations --- */

/* 1. Tickets (Laser Scan) */


@keyframes scanLaser {
  0% {
    top: 10%;
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    top: 90%;
    opacity: 0.5;
  }
}

/* 2. Factura (Receipt transform) */

@keyframes receiptPrint {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  30% {
    transform: translateY(0);
    opacity: 1;
  }
  80% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-20px);
    opacity: 0;
  }
}

/* 3. Informes (Charts) */





@keyframes chartGrow {
  0% {
    transform: scaleY(0.2);
  }
  100% {
    transform: scaleY(1);
  }
}

/* 4. Sonidos (Pulse) */




@keyframes radarPulse {
  0% {
    width: 100%;
    height: 100%;
    opacity: 1;
  }
  100% {
    width: 300%;
    height: 300%;
    opacity: 0;
  }
}

/* 5. Tienda (Floating Products) */



@keyframes floatItem {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  }
}

/* 6. Todo en uno (Orbit) */







@keyframes pulseCore {
  0% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1.1);
  }
}
@keyframes spinRing {
  100% {
    transform: rotate(360deg);
  }
}

@media (max-width: 900px) {
  .feature-tabs-wrapper {
    flex-direction: column;
    min-height: 600px;
  }
  .feature-tabs-sidebar {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--clr-border);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }
  .feature-tabs-sidebar::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
  }
  .feature-tab-btn {
    border-left: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    padding: 1rem 1.5rem;
  }
  .feature-tab-btn.active {
    border-left-color: transparent;
    border-bottom-color: var(--tab-accent);
  }
  .feature-tab-content-area {
    min-height: 400px;
  }
  .feature-tab-content {
    padding: 2rem;
  }
}
@media (max-width: 600px) {
  .feature-tab-content {
    padding: 1.5rem;
  }
  .feature-tab-title {
    font-size: 1.75rem;
  }
}

/* S5 ZQ Wrap Styles */





























/* SVG Mask for Draw Animation */










@keyframes zqDashScroll {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -8;
  }
}
@keyframes zqDashScrollReverse {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 8;
  }
}





@media (max-width: 768px) {
  .zq-item.left,
  .zq-item.right {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .zq-svg-wrap {
    display: none;
  }
  .zq-empty {
    display: none;
  }
}

/* ==========================================================
   CMS Features Grid — Opción D: Spotlight card destacada
   ========================================================== */

/* CMS Features Grid — Deck Fan-out */
.cms-features-grid {
  display: flex;
  flex-direction: row;
  gap: 4rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: stretch;
  justify-content: center;
}

/* ── Cards secundarias (base) ── */
.cms-feature-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    height 0.5s ease,
    opacity 0.5s ease;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

/* ── Mazo de Cartas (Deck) SIEMPRE DESPLEGADO ── */
.cms-deck-container {
  display: flex;
  flex-flow: column wrap;
  gap: 20px;
  align-content: space-between;
  width: 620px;
  height: 880px;
  position: relative;
}

.cms-deck-container .cms-feature-card {
  width: 300px;
  padding: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  opacity: 1;
  position: relative;
}

.cms-deck-container .cms-feature-card:nth-child(1),
.cms-deck-container .cms-feature-card:nth-child(2),
.cms-deck-container .cms-feature-card:nth-child(3) {
  height: 280px;
}

.cms-deck-container .cms-feature-card:nth-child(4),
.cms-deck-container .cms-feature-card:nth-child(5) {
  height: 430px;
}

/* Reducir márgenes internos para ganar espacio de texto */
.cms-deck-container .cms-feature-icon-wrap {
  margin-bottom: 1rem;
}

/* Destello de luz en hover para cards secundarias */
.cms-feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 0%,
    rgba(6, 182, 212, 0.08) 0%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  border-radius: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .cms-feature-card:hover::before {
    opacity: 1;
  }

  .cms-feature-card:hover {
    transform: translateY(-4px);
    box-shadow:
      0 12px 30px rgba(6, 182, 212, 0.12),
      0 2px 8px rgba(0, 0, 0, 0.06);
    border-color: rgba(6, 182, 212, 0.35);
  }
}

/* ── AI Mockup Animación ── */
.ai-mockup-container {
  flex-grow: 1;
  margin-top: 2rem;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(6, 182, 212, 0.2);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ai-mockup-header {
  background: rgba(15, 23, 42, 0.05);
  padding: 0.75rem;
  display: flex;
  gap: 6px;
  border-bottom: 1px solid rgba(6, 182, 212, 0.1);
}

.ai-mockup-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbd5e1;
}

.ai-mockup-dot:nth-child(1) { background: #ef4444; }
.ai-mockup-dot:nth-child(2) { background: #eab308; }
.ai-mockup-dot:nth-child(3) { background: #22c55e; }

.ai-mockup-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex-grow: 1;
}

.ai-mockup-hero {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}

.ai-line {
  height: 12px;
  border-radius: 6px;
  background: rgba(6, 182, 212, 0.3);
  opacity: 0;
}

.ai-line.short { width: 40%; animation: appearLine1 12s infinite; }
.ai-line.long { width: 80%; animation: appearLine2 12s infinite; }

.ai-btn {
  height: 24px;
  width: 100px;
  border-radius: 12px;
  background: rgba(6, 182, 212, 0.6);
  margin-top: 0.5rem;
  opacity: 0;
  animation: appearBtn 12s infinite;
}

.ai-mockup-grid {
  display: flex;
  gap: 1rem;
  flex-grow: 1;
}

.ai-mockup-card {
  flex: 1;
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid rgba(6, 182, 212, 0.1);
  border-radius: 8px;
  height: 100%;
  min-height: 80px;
  opacity: 0;
}

.ai-mockup-card:nth-child(1) { animation: appearCard1 12s infinite; }
.ai-mockup-card:nth-child(2) { animation: appearCard2 12s infinite; }
.ai-mockup-card:nth-child(3) { animation: appearCard3 12s infinite; }

.ai-wand {
  position: absolute;
  width: 24px;
  height: 24px;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.8) 0%, rgba(6, 182, 212, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  animation: wandMove 12s infinite;
  z-index: 10;
  filter: blur(2px);
  box-shadow: 0 0 15px #06b6d4, 0 0 30px #06b6d4;
  margin-left: -12px;
  margin-top: -12px;
}

@keyframes appearLine1 {
  0%, 10% { opacity: 0; transform: translateY(10px); }
  15%, 85% { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; transform: translateY(-5px); }
}

@keyframes appearLine2 {
  0%, 15% { opacity: 0; transform: translateY(10px); }
  20%, 85% { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; transform: translateY(-5px); }
}

@keyframes appearBtn {
  0%, 20% { opacity: 0; transform: scale(0.9); }
  25% { opacity: 1; transform: scale(1.05); }
  30%, 85% { opacity: 1; transform: scale(1); }
  95%, 100% { opacity: 0; transform: scale(0.95); }
}

@keyframes appearCard1 {
  0%, 25% { opacity: 0; transform: translateY(15px); }
  30%, 85% { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; transform: translateY(-10px); }
}

@keyframes appearCard2 {
  0%, 30% { opacity: 0; transform: translateY(15px); }
  35%, 85% { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; transform: translateY(-10px); }
}

@keyframes appearCard3 {
  0%, 35% { opacity: 0; transform: translateY(15px); }
  40%, 85% { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; transform: translateY(-10px); }
}

@keyframes wandMove {
  0%, 5% { opacity: 0; top: 10%; left: 50%; }
  
  8% { opacity: 1; top: 10%; left: 50%; transform: scale(1); }
  12% { opacity: 1; top: 15%; left: 30%; transform: scale(1.5); }
  
  13% { opacity: 1; top: 25%; left: 10%; transform: scale(1); }
  17% { opacity: 1; top: 25%; left: 90%; transform: scale(1.5); }
  
  18% { opacity: 1; top: 40%; left: 50%; transform: scale(1); }
  22% { opacity: 1; top: 40%; left: 50%; transform: scale(2); }
  
  23% { opacity: 1; top: 60%; left: 16%; transform: scale(1); }
  27% { opacity: 1; top: 75%; left: 16%; transform: scale(1.5); }
  
  28% { opacity: 1; top: 60%; left: 50%; transform: scale(1); }
  32% { opacity: 1; top: 75%; left: 50%; transform: scale(1.5); }
  
  33% { opacity: 1; top: 60%; left: 83%; transform: scale(1); }
  37% { opacity: 1; top: 75%; left: 83%; transform: scale(1.5); }
  
  40% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; }
}

/* ── Card destacada (IA) ── */
.cms-feature-card.main-feature {
  width: 500px;
  height: auto;
  flex-shrink: 0;
  justify-content: center;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(240, 253, 255, 0.85) 100%
  );
  border: 1.5px solid rgba(6, 182, 212, 0.35);
  box-shadow:
    0 0 0 1px rgba(6, 182, 212, 0.08),
    0 8px 32px rgba(6, 182, 212, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

/* Spotlight radial sobre la card IA */
.cms-feature-card.main-feature::before {
  content: "";
  position: absolute;
  top: -60px;
  left: -60px;
  width: 340px;
  height: 340px;
  background: radial-gradient(
    circle,
    rgba(6, 182, 212, 0.13) 0%,
    transparent 65%
  );
  pointer-events: none;
  border-radius: 50%;
  animation: spotlightFloat 8s ease-in-out infinite alternate;
}

/* Orbe decorativo inferior derecho */
.cms-feature-card.main-feature::after {
  content: "";
  position: absolute;
  bottom: -80px;
  right: -80px;
  width: 260px;
  height: 260px;
  background: radial-gradient(
    circle,
    rgba(0, 102, 255, 0.07) 0%,
    transparent 65%
  );
  pointer-events: none;
  border-radius: 50%;
}

@keyframes spotlightFloat {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(30px, 20px) scale(1.15);
  }
}

@media (hover: hover) and (pointer: fine) {
  .cms-feature-card.main-feature:hover {
    transform: translateY(-5px);
    box-shadow:
      0 0 0 1px rgba(6, 182, 212, 0.18),
      0 16px 48px rgba(6, 182, 212, 0.18),
      0 4px 12px rgba(0, 0, 0, 0.07);
    border-color: rgba(6, 182, 212, 0.55);
  }
}

/* ── Icono ── */
.cms-feature-icon-wrap {
  background: rgba(6, 182, 212, 0.1);
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition:
    transform 0.3s ease,
    background 0.3s ease;
  flex-shrink: 0;
}

.cms-feature-card.main-feature .cms-feature-icon-wrap {
  width: 72px;
  height: 72px;
  background: rgba(6, 182, 212, 0.12);
  margin-bottom: 2rem;
  box-shadow: 0 0 0 8px rgba(6, 182, 212, 0.06);
}

.cms-feature-card.main-feature .cms-feature-icon-wrap i {
  font-size: 34px;
}

@media (hover: hover) and (pointer: fine) {
  .cms-feature-card:hover .cms-feature-icon-wrap {
    transform: scale(1.1);
    background: rgba(6, 182, 212, 0.18);
  }
}

.cms-feature-icon-wrap i {
  font-size: 26px;
  color: #06b6d4;
}

/* ── Tipografía ── */
.cms-feature-card h4 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.cms-feature-card.main-feature h4 {
  font-size: 2rem;
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #0f172a 0%, #1e4a6e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cms-feature-card p {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.65;
  margin-bottom: 0;
}

.cms-feature-card.main-feature p {
  font-size: 1.05rem;
  color: #334155;
  max-width: 520px;
}

.cms-feature-card p strong {
  color: #0f172a;
  font-weight: 600;
}

/* ── Badge IA ── */
.cms-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(
    90deg,
    rgba(6, 182, 212, 0.12),
    rgba(0, 102, 255, 0.1)
  );
  border: 1px solid rgba(6, 182, 212, 0.35);
  color: #0891b2;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 13px;
  border-radius: 20px;
  margin-bottom: 1.75rem;
  align-self: flex-start;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  position: relative;
  z-index: 1;
}

/* Punto de pulso en el badge */
.cms-ai-badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #06b6d4;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.4);
  animation: badgePulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes badgePulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.4);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(6, 182, 212, 0);
  }
}

/* ── Línea decorativa inferior en card IA ── */
.cms-feature-card.main-feature .cms-feature-card-footer {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(6, 182, 212, 0.15);
  display: flex;
  gap: 1.5rem;
}

.cms-feature-card-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cms-feature-card-stat strong {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0891b2;
  font-family: Montserrat, sans-serif;
  letter-spacing: -0.02em;
}

.cms-feature-card-stat span {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 500;
}

/* ── Slider Dots (Ocultos en Desktop) ── */
.cms-slider-dots {
  display: none;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .cms-features-grid {
    flex-direction: column;
    gap: 2rem;
    min-height: auto;
  }

  .cms-feature-card.main-feature {
    width: 100%;
  }

  /* Slider Mobile */
  .cms-deck-container {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1rem;
    perspective: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 0.5rem;
    background: transparent;
  }

  .cms-deck-container::-webkit-scrollbar {
    display: none;
  }

  .cms-deck-container .cms-feature-card {
    position: relative;
    transform: none !important;
    opacity: 1 !important;
    height: auto !important;
    z-index: 1 !important;
    flex: 0 0 85%;
    width: 85%;
    scroll-snap-align: center;
    left: auto; /* Reiniciar el centrado absoluto del desktop */
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-color: rgba(15, 23, 42, 0.08);
  }

  /* Tarjeta protagonista del slider (sustituye al :hover, inexistente en touch) */
  .cms-deck-container .cms-feature-card.is-slide-active {
    border-color: rgba(6, 182, 212, 0.35);
    box-shadow: none;
  }

  .cms-deck-container .cms-feature-card.is-slide-active::before {
    opacity: 1;
  }

  .cms-deck-container .cms-feature-card.is-slide-active .cms-feature-icon-wrap {
    transform: scale(1.1);
    background: rgba(6, 182, 212, 0.18);
  }

  /* Puntos del Slider */
  .cms-slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 0.5rem;
  }

  .cms-slider-dots .cms-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(6, 182, 212, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .cms-slider-dots .cms-dot.active {
    background: rgba(6, 182, 212, 1);
    width: 24px;
    border-radius: 4px;
  }
}

@media (max-width: 600px) {
  .cms-feature-card.main-feature h4 {
    font-size: 1.5rem;
  }

  .cms-feature-card.main-feature p {
    font-size: 1rem;
  }
}

/* ==========================================================
   S4.5 Glassmorphism Panel Styles (Antes / Después)
   ========================================================== */





































@media (max-width: 768px) {
  .s45-split {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* --- Extracted from ecommerce/index.html (Problem Section) --- */


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




/* Los primeros 2 de cada lado fondo blanco */


/* El final mantiene color */









/* --- Extracted from ecommerce/index.html (WhatsApp Premium) --- */

.scene {
  padding: 2rem 0;
}

.scene-header {
  text-align: center;
  margin-bottom: 3rem;
}
.scene-eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #346ed3;
  margin-bottom: 6px;
}
.scene-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--color-text-primary, #0f172a);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.scene-wrapper {
  transition: all 0.5s ease;
}

.split {
  display: flex;
  gap: 30px;
  max-width: 960px;
  margin: 0 auto;
  align-items: stretch;
}
.split > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center top;
}
/* --- Desktop View (Side by Side) --- */
@media (min-width: 901px) {
  .col-bad, .col-good {
    flex: 1;
    transform: scale(1);
    z-index: 10;
  }
  .col-bad .phone-frame {
    box-shadow: 0 20px 40px -10px rgba(239, 68, 68, 0.25);
    border: 1px solid rgba(239, 68, 68, 0.4);
  }
  .col-good .phone-frame {
    box-shadow: 0 20px 40px -10px rgba(16, 185, 129, 0.25);
    border: 1px solid rgba(16, 185, 129, 0.4);
  }
}

/* --- Mobile View (Stacked) --- */
@media (max-width: 900px) {
  .split {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }
  .col-bad .phone-frame {
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.4);
  }
  .col-good .phone-frame {
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.4);
  }
}

.phone-frame {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--color-border-secondary, #e2e8f0);
  background: #fff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.ph-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 9px;
}

.ph-topbar-good {
  background: #1b2537;
}

.ph-back {
  color: rgba(255, 255, 255, 0.55);
  font-size: 18px;
  line-height: 1;
  margin-right: 2px;
}
.ph-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  position: relative;
}
.ph-avatar-bad {
  background: #ef4444;
  color: #fee2e2;
}
.ph-avatar-good {
  background: #10b981;
  color: #d1fae5;
}

.ph-avatar-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid #1b2537;
}
.dot-off {
  background: #888;
}
.dot-on {
  background: #4cd964;
}

.ph-info {
  flex: 1;
}
.ph-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}
.ph-status {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 1px;
}
.ph-status.online {
  color: #4cd964;
}

.ph-icons {
  display: flex;
  gap: 14px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 16px;
}

.ph-body {
  padding: 12px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-grow: 1;
}

.ph-body-good {
  background-color: #efeae2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000000' stroke-width='1.5' stroke-opacity='0.05'%3E%3Ccircle cx='20' cy='20' r='6'/%3E%3Cpath d='M75 15 L85 25 L75 35 Z'/%3E%3Cpath d='M15 80 Q 25 70 35 80 T 55 80'/%3E%3Crect x='75' y='75' width='12' height='12' rx='2'/%3E%3Ccircle cx='50' cy='50' r='2'/%3E%3C/g%3E%3C/svg%3E");
}

.day-sep {
  text-align: center;
  margin: 4px 0 6px;
}
.day-sep span {
  font-size: 10px;
  font-weight: 500;
  color: #888;
  background: rgba(255, 255, 255, 0.7);
  padding: 2px 10px;
  border-radius: 10px;
}

.msg-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 2px;
}

.bubble {
  max-width: 80%;
  padding: 7px 11px 5px;
  font-size: 12px;
  line-height: 1.45;
  position: relative;
  word-break: break-word;
}

.bubble.recv {
  align-self: flex-start;
  background: #fff;
  color: #111;
  border-radius: 14px 14px 14px 3px;
  border: 0.5px solid rgba(0, 0, 0, 0.06);
}


.bubble.sent-good {
  align-self: flex-end;
  background: #dcf8c6;
  color: #1a1a1a;
  border-radius: 14px 14px 3px 14px;
}

.msg-footer {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 3px;
  font-size: 9.5px;
  color: #aaa;
}
.msg-footer.right {
  justify-content: flex-end;
}
.tick-sent {
  color: #888;
}

.tick-read-good {
  color: #34b7f1;
}

.ph-input-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.08);
  background: #f7f7f7;
}
.ph-input-bar-dark {
  background: #f0f0f0;
}
.ph-input {
  flex: 1;
  background: #fff;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 11.5px;
  color: #999;
}
.ph-send-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.send-good {
  background: #25d366;
  color: #fff;
}

.blist {
  list-style: none;
  padding: 0;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.blist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-text-secondary, #475569);
  line-height: 1.4;
}
.blist-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: all 0.4s ease;
}
.blist-text {
  margin-top: 5px;
  transition: all 0.4s ease;
}
.ic-x {
  background: #ef4444;
  color: #fee2e2;
}
.ic-ok {
  background: #10b981;
  color: #d1fae5;
}

/* Strikethrough effect when Nube3i is ON (Option 4) */



/* Reset Strikethrough when Nube3i is OFF */



/* ================================================
   [S4] LIVE SYNC — Opción E
   Todas las animaciones usan duration: 8s para
   mantenerse perfectamente sincronizadas.
   ================================================ */

/* ── Keyframes master (8s loop) ── */
@keyframes s4-order-pop {
  0%, 5%   { opacity: 0; transform: translateY(12px) scale(0.96); }
  12%, 45% { opacity: 1; transform: translateY(0)    scale(1);    }
  52%, 100%{ opacity: 0; transform: translateY(-8px) scale(0.97); }
}
@keyframes s4-particle-travel {
  0%, 10%  { left: -60px; opacity: 0; }
  15%      { opacity: 1;  }
  50%      { left: 100%;  opacity: 1; }
  55%, 100%{ left: 100%;  opacity: 0; }
}
@keyframes s4-particle-travel-2 {
  0%, 15%  { left: 100%;  opacity: 0; }
  20%      { opacity: 1;  }
  58%      { left: -60px; opacity: 1; }
  63%, 100%{ left: -60px; opacity: 0; }
}
@keyframes s4-particle-travel-vertical {
  0%, 10%  { top: -40px; opacity: 0; }
  15%      { opacity: 1;  }
  50%      { top: 100%;  opacity: 1; }
  55%, 100%{ top: 100%;  opacity: 0; }
}
@keyframes s4-particle-travel-vertical-2 {
  0%, 15%  { top: 100%;  opacity: 0; }
  20%      { opacity: 1;  }
  58%      { top: -40px; opacity: 1; }
  63%, 100%{ top: -40px; opacity: 0; }
}
@keyframes s4-invoice-slide {
  0%, 18%  { opacity: 0; transform: translateY(-14px); max-height: 0;   overflow: hidden; }
  26%, 80% { opacity: 1; transform: translateY(0);     max-height: 60px;}
  88%, 100%{ opacity: 1; transform: translateY(0);     max-height: 60px;}
}
@keyframes s4-stock-tick {
  0%, 18%  { opacity: 0; transform: translateX(6px); }
  26%, 80% { opacity: 1; transform: translateX(0);   }
  88%, 100%{ opacity: 1; transform: translateX(0);   }
}
@keyframes s4-badge-pulse {
  0%, 49%  { box-shadow: 0 0 0 0 rgba(59,130,246,0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(59,130,246,0); }
  100%     { box-shadow: 0 0 0 0 rgba(59,130,246,0);   }
}
@keyframes s4-dot-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}
@keyframes s4-stock-fill-drop {
  0%, 25%  { width: 52%; }
  35%, 100%{ width: 46%; }
}

/* ── Section header ── */
.s4-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.s4-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #3b82f6;
  margin-bottom: 1.1rem;
}
.s4-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin-bottom: 1.1rem;
}
.s4-title span {
  background: linear-gradient(90deg, #3b82f6, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.s4-subtitle {
  font-size: 1.05rem;
  color: rgba(248,250,252,0.6);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.65;
}

/* ── Demo stage (3-col: panel | bridge | panel) ── */
.s4-demo-stage {
  display: grid;
  grid-template-columns: 1fr 140px 1fr;
  gap: 0;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto 3rem;
}

/* ── Panel shared ── */
.s4-panel {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 28px;
  padding: 2.25rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
  min-height: 330px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.s4-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
}
.s4-panel-shop {
  border-left: 2px solid rgba(59,130,246,0.25);
  box-shadow: -4px 0 40px rgba(59,130,246,0.06), 0 20px 40px rgba(0,0,0,0.2);
}
.s4-panel-erp {
  border-right: 2px solid rgba(139,92,246,0.25);
  box-shadow: 4px 0 40px rgba(139,92,246,0.06), 0 20px 40px rgba(0,0,0,0.2);
}

/* ── Panel header row ── */
.s4-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.s4-panel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: s4-dot-blink 2s ease-in-out infinite;
}
.s4-dot-blue   { background: #3b82f6; box-shadow: 0 0 8px rgba(59,130,246,0.6); }
.s4-dot-purple { background: #8b5cf6; box-shadow: 0 0 8px rgba(139,92,246,0.6); animation-delay: 0.4s; }
.s4-panel-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(248,250,252,0.7);
  text-transform: uppercase;
  letter-spacing: 1px;
  flex: 1;
}
.s4-live-badge {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(59,130,246,0.15);
  color: #60a5fa;
  border: 1px solid rgba(59,130,246,0.2);
  animation: s4-badge-pulse 2s ease infinite;
}
.s4-live-badge-purple {
  background: rgba(139,92,246,0.15);
  color: #a78bfa;
  border-color: rgba(139,92,246,0.2);
  animation: none;
}

/* ── Product card (shop panel) ── */
.s4-product-card {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 22px;
  padding: 1.35rem 1.6rem;
}
.s4-product-thumb {
  width: 90px;
  height: 90px;
  background: rgba(59,130,246,0.1);
  border-radius: 18px;
  border: 1px solid rgba(59,130,246,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.s4-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}
.s4-product-info { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.s4-product-name { font-size: 0.95rem; font-weight: 700; color: #f8fafc; }
.s4-product-price{ font-size: 1.15rem;    font-weight: 800; color: #3b82f6;  }
.s4-stock-bar-wrap{ display: flex; align-items: center; gap: 10px; }
.s4-stock-bar {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}
.s4-stock-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #06b6d4);
  border-radius: 2px;
  animation: s4-stock-fill-drop 8s ease-in-out infinite;
}
.s4-stock-label {
  font-size: 0.75rem;
  color: rgba(248,250,252,0.5);
  white-space: nowrap;
}
.s4-stock-num { color: rgba(248,250,252,0.8); font-weight: 700; }

/* ── Order popup (shop panel) ── */
.s4-order-popup {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(59,130,246,0.08);
  border: 1px solid rgba(59,130,246,0.22);
  border-radius: 18px;
  padding: 1.1rem 1.3rem;
  animation: s4-order-pop 8s ease-in-out infinite;
  box-shadow: 0 0 24px rgba(59,130,246,0.1);
}
.s4-order-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.s4-order-info   { flex: 1; }
.s4-order-name   { font-size: 0.88rem;  font-weight: 700; color: #f8fafc; line-height: 1.2; }
.s4-order-detail { font-size: 0.78rem;  color: rgba(248,250,252,0.5); margin-top: 3px; }
.s4-order-status { font-size: 0.78rem;  font-weight: 700; color: #10b981; white-space: nowrap; }

/* ── Bridge ── */
.s4-bridge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 8px;
  position: relative;
  z-index: 2;
}
.s4-bridge-line {
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  position: relative;
  overflow: visible;
}
.s4-particle {
  position: absolute;
  top: -3px;
  left: -60px;
  width: 60px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, #3b82f6, #06b6d4, transparent);
  box-shadow: 0 0 12px rgba(59,130,246,0.7);
  animation: s4-particle-travel 8s ease-in-out infinite;
}
.s4-particle-2 {
  background: linear-gradient(90deg, transparent, #8b5cf6, #a78bfa, transparent);
  box-shadow: 0 0 12px rgba(139,92,246,0.7);
  animation: s4-particle-travel-2 8s ease-in-out infinite;
}
.s4-bridge-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(59,130,246,0.12);
  border: 1px solid rgba(59,130,246,0.25);
  border-radius: 20px;
  padding: 5px 10px;
  font-size: 0.7rem;
  font-weight: 800;
  color: #60a5fa;
  white-space: nowrap;
  letter-spacing: 0.5px;
  box-shadow: 0 0 20px rgba(59,130,246,0.15);
}

/* ── Invoice list (ERP panel) ── */
.s4-invoice-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.s4-invoice-row {
  display: grid;
  grid-template-columns: 52px 1fr auto auto;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 8px 12px;
}
.s4-invoice-new {
  background: rgba(139,92,246,0.08);
  border-color: rgba(139,92,246,0.25);
  box-shadow: 0 0 20px rgba(139,92,246,0.1);
  animation: s4-invoice-slide 8s ease-in-out infinite;
}
.s4-inv-id {
  font-size: 0.7rem;
  font-family: monospace;
  color: rgba(248,250,252,0.4);
}
.s4-inv-client {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(248,250,252,0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s4-inv-amount {
  font-size: 0.78rem;
  font-weight: 700;
  color: #f8fafc;
  white-space: nowrap;
}
.s4-inv-badge {
  font-size: 0.58rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.s4-badge-paid { background: rgba(16,185,129,0.15); color: #10b981; }
.s4-badge-new  {
  background: rgba(139,92,246,0.2);
  color: #a78bfa;
  border: 1px solid rgba(139,92,246,0.3);
}

/* ── Stock update row (ERP panel) ── */
.s4-stock-update {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(16,185,129,0.07);
  border: 1px solid rgba(16,185,129,0.18);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.75rem;
  color: rgba(248,250,252,0.6);
  margin-top: auto;
}
.s4-erp-stock { font-weight: 700; color: #f8fafc; margin-left: auto; }
.s4-erp-stock-arrow {
  color: #10b981;
  animation: s4-stock-tick 8s ease-in-out infinite;
  display: inline-block;
}

/* ── Footer badge ── */
.s4-footer-badge {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(248,250,252,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 1rem;
  letter-spacing: 0.5px;
}
.s4-footer-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(16,185,129,0.7);
  animation: s4-dot-blink 1.5s ease-in-out infinite;
}

/* ── Responsive ≤992px ── */
@media (max-width: 992px) {
  .s4-demo-stage {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    gap: 0;
  }
  
  /* Vertical bridge configuration with parallel lines on left and right of badge */
  .s4-bridge {
    position: relative;
    height: 110px;
    width: 100%;
    padding: 0;
    margin: 0;
    display: block;
  }
  .s4-bridge-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: 3;
  }
  .s4-bridge-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 50px);
    width: 2px;
    height: 100%;
    background: rgba(255,255,255,0.08);
    overflow: visible;
  }
  .s4-bridge-line-2 {
    left: calc(50% + 50px);
  }
  
  /* Override vertical particle positions and animations */
  .s4-particle {
    top: -40px;
    left: -3px;
    width: 8px;
    height: 40px;
    background: linear-gradient(180deg, transparent, #3b82f6, #06b6d4, transparent);
    animation: s4-particle-travel-vertical 8s ease-in-out infinite;
  }
  .s4-particle-2 {
    background: linear-gradient(180deg, transparent, #8b5cf6, #a78bfa, transparent);
    animation: s4-particle-travel-vertical-2 8s ease-in-out infinite;
  }
  
  /* Keep beautiful rounded corners and panel left/right accents */
  .s4-panel {
    border-radius: 24px;
    min-height: unset;
    padding: 2rem;
  }
  .s4-panel-shop {
    border-left: 2px solid rgba(59,130,246,0.25);
    border-top: 1px solid rgba(255,255,255,0.09);
  }
  .s4-panel-erp {
    border-right: 2px solid rgba(139,92,246,0.25);
    border-bottom: 1px solid rgba(255,255,255,0.09);
  }
  
  .s4-invoice-row { grid-template-columns: 44px 1fr auto; }
  .s4-inv-amount  { display: none; }
  .s4-footer-badge { flex-direction: column; gap: 4px; font-size: 0.78rem; }
}

@media (max-width: 480px) {
  .s4-title    { font-size: 1.85rem; }
  .s4-subtitle { font-size: 0.98rem; }
  .s4-panel    { padding: 1.5rem; }
  
  /* Keep product card in row layout but compact it */
  .s4-product-card {
    flex-direction: row;
    align-items: center;
    gap: 1.15rem;
    padding: 1.1rem;
    border-radius: 16px;
  }
  .s4-product-thumb {
    width: 72px;
    height: 72px;
    border-radius: 12px;
  }
  .s4-product-thumb img {
    border-radius: 10px;
  }
  .s4-product-name {
    font-size: 0.88rem;
  }
  .s4-product-price {
    font-size: 1.05rem;
  }
  .s4-order-popup {
    padding: 0.9rem 1.1rem;
    border-radius: 14px;
    gap: 0.85rem;
  }
  .s4-order-avatar {
    width: 38px;
    height: 38px;
    font-size: 0.7rem;
  }
  .s4-order-name {
    font-size: 0.82rem;
  }
  .s4-order-detail {
    font-size: 0.72rem;
  }
  .s4-order-status {
    font-size: 0.72rem;
  }
}

/* =========================================
   MOBILE OPTIMIZATIONS (PHASE 3)
   ========================================= */
@media (max-width: 768px) {
  /* Remove inline max-widths that break layout */
  h2[style*="max-width"],
  p[style*="max-width"] {
    max-width: 100% !important;
  }
  
  /* Fondo neural: se MANTIENE visible en móvil. El rendimiento se controla desde JS
     (neural-bg.js: DPR limitado + tope de 30 fps + menos partículas) y desde el interruptor
     global window.pauseBackgroundAnimations (main.js), que solo lo congela en equipos muy justos. */
  
  /* Breathing room: Reduce massive 100px vertical paddings on mobile */
  section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  
  .hero {
    padding-top: 80px !important; /* Keep hero slightly taller */
    padding-bottom: 60px !important;
  }
}


/* ═══════════════════════════════════════════════════════
   FAQ SECTION (Shared)
   ═══════════════════════════════════════════════════════ */
.faq-accordion {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-accordion-limited .faq-item:nth-child(n+5) {
  display: none !important;
}

.faq-item {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.01);
}

/* Scroll reveal initial state */
.faq-item.faq-reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.96);
  filter: blur(8px);
  transition: 
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

/* Scroll reveal final state */
.faq-item.faq-reveal.faq-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Sutil glow de activación */
@keyframes faq-glow-pulse {
  0% { box-shadow: 0 4px 12px rgba(0,0,0,0.01); }
  50% { box-shadow: 0 8px 30px rgba(0, 102, 255, 0.12); border-color: rgba(0, 102, 255, 0.25); }
  100% { box-shadow: 0 4px 12px rgba(0,0,0,0.01); }
}

.faq-item.faq-reveal.faq-visible:not([open]) {
  animation: faq-glow-pulse 0.8s ease-out 0.75s;
}

.faq-item[open] {
  box-shadow: 0 10px 25px rgba(0, 102, 255, 0.05);
  border-color: rgba(0, 102, 255, 0.15);
}

.faq-question {
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 1.05rem;
  color: #0f172a;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-chevron {
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 1rem;
}

.faq-chevron::before,
.faq-chevron::after {
  content: '';
  position: absolute;
  background-color: #64748b;
  transition: background-color 0.3s ease;
}

.faq-chevron::before {
  width: 12px;
  height: 2px;
  top: 9px;
  left: 4px;
}

.faq-chevron::after {
  width: 2px;
  height: 12px;
  top: 4px;
  left: 9px;
}

.faq-item[open] .faq-chevron {
  transform: rotate(45deg);
}

.faq-item[open] .faq-chevron::before,
.faq-item[open] .faq-chevron::after {
  background-color: var(--clr-primary);
}

.faq-answer {
  padding: 0 2rem 1.5rem;
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.65;
  animation: faq-fade-in 0.3s ease-out;
}

.faq-answer p {
  margin-bottom: 0;
  color: #475569 !important;
}

@keyframes faq-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
  .faq-question {
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
  }
  .faq-answer {
    padding: 0 1.25rem 1rem;
    font-size: 0.88rem;
  }
}

@media (max-width: 900px) {
  .faq-question {
    padding: 1.25rem 1.5rem;
    font-size: 0.98rem;
  }
  .faq-answer {
    padding: 0 1.5rem 1.25rem;
    font-size: 0.92rem;
  }
}

/* --- FAQ Expand Button Glow Style --- */
.btn-faq-glow {
  background: linear-gradient(135deg, #334155, #1e293b);
  color: white;
  padding: 0.8rem 1.8rem;
  border-radius: 100px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(100, 116, 139, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  animation: faqBtnPulse 3s ease-in-out infinite;
}

.btn-faq-glow:before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.25) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.btn-faq-glow:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(100, 116, 139, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.btn-faq-glow:hover:before {
  opacity: 1;
}

.btn-faq-glow svg {
  transition: transform 0.3s ease;
}

.btn-faq-glow.is-expanded svg {
  transform: rotate(180deg);
}

@keyframes faqBtnPulse {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(100, 116, 139, 0.35);
  }
  50% {
    box-shadow: 0 4px 15px rgba(100, 116, 139, 0.35), 0 0 0 10px rgba(100, 116, 139, 0);
  }
}

/* --- NAVBAR DROPDOWN --- */
.navbar__dropdown {
  position: relative;
  display: inline-block;
}

.navbar__dropdown-toggle {
  background: transparent;
  border: none;
  color: #fff;
  font-family: inherit;
  font-weight: 500;
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  transition: color var(--transition);
}

.navbar__dropdown-toggle:hover {
  color: var(--clr-primary);
}

.dropdown-chevron {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar__dropdown:hover .dropdown-chevron,
.navbar__dropdown.is-active .dropdown-chevron {
  transform: rotate(180deg);
}

.navbar__dropdown-menu {
  position: absolute;
  top: calc(100% + 1.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(10px) scale(0.95);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(17, 27, 46, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 0.5rem;
  width: 320px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 102, 255, 0.1) inset;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100;
}

/* Invisible hover bridge */
.navbar__dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 2.5rem;
}

.navbar__dropdown:hover .navbar__dropdown-menu,
.navbar__dropdown.is-active .navbar__dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

.dropdown-menu-inner {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dropdown-item {
  display: flex !important;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  text-decoration: none;
  color: var(--clr-text-main) !important;
  transition: all 0.3s ease !important;
  position: relative;
  overflow: hidden;
}

.dropdown-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0.03), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.dropdown-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.dropdown-item:hover::before {
  opacity: 1;
}

.dropdown-item__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

.dropdown-item:hover .dropdown-item__icon {
  transform: scale(1.05);
}

.nav-erp-icon { color: var(--clr-erp); box-shadow: 0 0 15px rgba(255, 51, 85, 0); }
.dropdown-item:hover .nav-erp-icon { background: rgba(255, 51, 85, 0.1); border-color: rgba(255, 51, 85, 0.2); box-shadow: 0 0 15px rgba(255, 51, 85, 0.2); }

.nav-ecommerce-icon { color: var(--clr-ecommerce); box-shadow: 0 0 15px rgba(52, 110, 211, 0); }
.dropdown-item:hover .nav-ecommerce-icon { background: rgba(52, 110, 211, 0.1); border-color: rgba(52, 110, 211, 0.2); box-shadow: 0 0 15px rgba(52, 110, 211, 0.2); }

.nav-tpv-icon { color: var(--clr-tpv); box-shadow: 0 0 15px rgba(16, 185, 129, 0); }
.dropdown-item:hover .nav-tpv-icon { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.2); box-shadow: 0 0 15px rgba(16, 185, 129, 0.2); }

.nav-crm-icon { color: var(--clr-crm); box-shadow: 0 0 15px rgba(168, 85, 247, 0); }
.dropdown-item:hover .nav-crm-icon { background: rgba(168, 85, 247, 0.1); border-color: rgba(168, 85, 247, 0.2); box-shadow: 0 0 15px rgba(168, 85, 247, 0.2); }

.nav-cms-icon { color: var(--clr-cms); box-shadow: 0 0 15px rgba(6, 182, 212, 0); }
.dropdown-item:hover .nav-cms-icon { background: rgba(6, 182, 212, 0.1); border-color: rgba(6, 182, 212, 0.2); box-shadow: 0 0 15px rgba(6, 182, 212, 0.2); }

.dropdown-item__content {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.dropdown-item__title {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 2px;
}

.dropdown-item__desc {
  font-size: 0.8rem;
  color: var(--clr-text-muted);
}

@media (max-width: 900px) {
  .navbar__dropdown-menu {
    position: static;
    transform: none !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    width: 100%;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0;
    margin-top: 1rem;
    display: none;
  }
  
  .navbar__dropdown:hover .navbar__dropdown-menu,
  .navbar__dropdown.is-active .navbar__dropdown-menu {
    display: block;
  }

  .navbar__dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    font-size: 1.1rem;
    padding: 0.5rem 0;
  }
}


/* ═══════════════════════════════════════════════════════════════
   CTA final tipo card (faq-cta-card) — replicado de home
   + base .home-module-link del footer bento-cockpit.
   Home las define en home.css (no cargada por las landings de features).
   ═══════════════════════════════════════════════════════════════ */
.neural-canvas-abs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.container-above-canvas {
  position: relative;
  z-index: 1;
}

.gradient-text-pink-cyan {
  background: linear-gradient(90deg, #ff0055, #00d4ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.faq-cta-card {
  position: relative;
  overflow: hidden;
  text-align: center;
  max-width: 920px;
  margin: 4rem auto 0;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
  border-radius: 28px;
  background: linear-gradient(185deg, #0b1121 0%, #060b14 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 70px -25px rgba(8, 13, 28, 0.55);
}

.faq-cta-card__inner {
  position: relative;
  z-index: 1;
}

.faq-cta-card h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.2;
  max-width: 680px;
  margin: 0 auto 2rem;
  letter-spacing: -0.5px;
}

.faq-cta-card .cta-image-btn-wrap {
  margin-bottom: 2rem;
}

/* Pulso del boton de demo dentro de la card (antes .erp-cta-final .btn-primary) */
.faq-cta-card .btn-primary {
  animation: ctaBtnPulse 3s ease-in-out infinite;
}

@media (max-width: 768px) {
  .faq-cta-card {
    margin-top: 3rem;
    border-radius: 22px;
  }
}

/* Enlace de módulo del footer (bento-cockpit) — base que vive en home.css */
.home-module-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--module-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
}

.home-module-link .link-arrow.anim-shaft .shaft {
  opacity: 0;
  transform: translateX(-4px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.home-module-link .link-arrow.anim-shaft .head {
  transform: translateX(-4px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-module-link:hover .link-arrow.anim-shaft .shaft {
  opacity: 1;
  transform: translateX(0);
}

.home-module-link:hover .link-arrow.anim-shaft .head {
  transform: translateX(0);
}

/* ══════════════════════════════════════════════════════════════════════════════
   CONTENT-VISIBILITY — saltar layout/paint de secciones fuera de viewport   [Nivel B]
   Aplica en TODOS los tamaños (PC también se beneficia en páginas larguísimas).
   · Selector `section:not(:has(canvas))`: EXCLUYE héroes y cualquier sección con canvas
     (neural, dashboards, sparklines). Motivo: el motor neural mide su alto con offsetHeight;
     una sección "saltada" reportaría un alto estimado y descuadraría el canvas. Estas quedan
     para el rework del scheduler (Nivel B2).
   · `contain-intrinsic-size: auto 700px`: la palabra clave `auto` memoriza el alto real tras
     el primer render (el 700px solo es la estimación previa) → minimiza saltos de scrollbar.
   · `@supports` + degradación de `:has`: en navegadores sin soporte la regla se ignora (inocua).
   ────────────────────────────────────────────────────────────────────────────── */
@supports (content-visibility: auto) {
  section:not(:has(canvas)) {
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   OPTIMIZACIÓN MÓVIL / TABLET (≤1024px) — fluidez de scroll   [Nivel A]
   100% ADITIVO: no toca el diseño de escritorio. Ver ESTUDIO_RENDIMIENTO_LANDINGS.md.
   Reversible: borrando este bloque se vuelve al comportamiento anterior.
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* (1) Los dos glows de fondo (body::before/::after, blur(100px) sobre 50-60vw) dejan de
     ANIMAR su scale: animar una capa desenfocada gigante re-rasteriza el frame entero cada
     tick. Estáticos solo se pintan una vez. */
  body::before,
  body::after {
    animation: none !important;
  }

  /* (2) backdrop-filter fuera en secciones y tarjetas de cristal. En GPU integrada, cada
     backdrop-filter re-desenfoca el fondo en CADA frame de scroll (el fondo que ve por debajo
     cambia al scrollear). El color semitransparente que ya llevan estos elementos basta.
     Patrón ya probado en ecommerce.css (@media ≤992px). */
  .section-glass-dark,
  .section-glass-white,
  [class*="glass"],
  [class*="__card"],
  .bento-card,
  .card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* (3) Nav sticky (isla flotante): siempre visible durante el scroll, así que su blur es
     coste por-frame permanente. Lo REDUCIMOS (más barato) en vez de quitarlo, para no perder
     legibilidad de la barra sobre el contenido. */
  .isla-flotante__nav,
  #mainNav,
  .navbar {
    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(4px) !important;
  }

  /* (4) Fondo neural (canvas de neural-bg.js / neural-bg-3d.js), sea auto-inyectado en
     .section-glass-white o colocado a mano en héroes/CTAs: solo en escritorio. En móvil/tablet
     se oculta por completo (no solo estático) en las 6 landings. */
  .neural-canvas-bg,
  .neural-canvas-bg-3d,
  .s78-canvas {
    display: none !important;
  }
}