/* ============ Variables ============ */
/* Paleta "Marsil Claro" — el mismo tema por defecto de la app real (ver
   src/renderer/src/assets/base.css en el repo gestor-comercios), para que la
   landing y el producto se sientan como una sola cosa. Antes esta landing
   tenía su propio acento verde-azulado (#0F9B8E), sin relación con la app. */
:root {
  --color-bg: #fafaf8;
  --color-bg-alt: #f2f2ef;
  --color-text: #0a0a0a;
  --color-text-muted: #6b6a66;
  --color-accent: #0a0a0a;
  --color-accent-dark: #090909;
  --color-border: #e7e5e0;
  --color-border-strong: #c4c3be;
  --radius: 8px;
  --radius-lg: 12px;
  /* Sombras en dos capas neutras (mismos valores que --shadow-md/--shadow-lg
     de la app) — nada de tinte de color, incluso en hover: el "levante" se
     siente por el desplazamiento y la sombra más difusa, no por un halo. */
  --shadow-card: 0 2px 4px -1px rgb(15 23 42 / 0.06), 0 8px 16px -4px rgb(15 23 42 / 0.04);
  --shadow-card-hover: 0 4px 8px -2px rgb(15 23 42 / 0.07), 0 16px 32px -8px rgb(15 23 42 / 0.05);
  --shadow-btn: 0 1px 2px 0 rgb(15 23 42 / 0.05), 0 1px 3px -1px rgb(15 23 42 / 0.03);
  --shadow-btn-hover: 0 2px 4px -1px rgb(15 23 42 / 0.08), 0 8px 16px -4px rgb(15 23 42 / 0.06);
  --max-width: 1100px;
  --color-bg-tint: #f2f2ef;
  --border-hover: var(--color-border-strong);

  /* Colores del tema real de la app ("Marsil Claro"), usados dentro de las
     recreaciones de pantalla (.mock) para que esas maquetas sean fieles al
     producto real — antes tenían un azul (#2563eb) de una versión vieja de
     la app, que ya no existe: el acento real hoy es negro, igual que el de
     esta misma landing. */
  --app-accent: #0a0a0a;
  --app-accent-dark: #090909;
  --app-accent-bg: #cfcfcd;
  --app-success: #067647;
  --app-success-bg: #daeae3;
  --app-bg: #fafaf8;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

h1, h2, h3 {
  line-height: 1.2;
}

/* Jerarquia tipografica: el h1 del hero domina la pagina; h2 un escalon
   debajo para subtitulos de seccion; h3 mas suelto porque son titulos
   cortos de tarjeta y demasiado tracking negativo los aprieta. */
h1 {
  font-weight: 800;
  letter-spacing: -0.03em;
}

h2 {
  font-weight: 800;
  letter-spacing: -0.025em;
}

h3 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

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

/* ============ Botones ============ */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  text-align: center;
}

.btn-primary {
  background: var(--color-accent);
  color: #fff;
  box-shadow: var(--shadow-btn);
}

.btn-primary:hover {
  background: var(--color-accent-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn-hover);
}

.btn-outline {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn-outline:hover {
  background: rgba(10, 10, 10, 0.08);
  transform: translateY(-2px);
}

.btn-large {
  padding: 16px 36px;
  font-size: 1.05rem;
}

.btn-header {
  display: none;
}

/* Botón principal (header/hero/cierre final): mismo lenguaje que los botones
   reales de la app (ver bg-gradiente-acento en base.css) — degradado
   ESTÁTICO y sutil entre dos tonos casi idénticos del acento, sin animación
   de color ni brillo en loop. Antes tenía un degradado animado de 3 paradas
   (negro→acento→teal→negro) con destello diagonal y ripple al clic; se sacó
   por completo para pegar con la identidad real, más contenida. Deliberadamente
   separado de .btn-primary para que los botones de plan (incluido "Negocio")
   queden planos/contenidos. */
.btn-shine {
  background: linear-gradient(135deg, var(--color-accent-dark) 0%, var(--color-accent) 100%);
  color: #fff;
  box-shadow: var(--shadow-btn);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-shine:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn-hover);
}

/* ============ Header ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.logo {
  display: flex;
  align-items: center;
}

.logo-img {
  height: 28px;
  width: auto;
  display: block;
}

.nav-desktop {
  display: none;
  gap: 32px;
}

.nav-desktop a {
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.15s ease;
}

.nav-desktop a:hover {
  color: var(--color-text);
}

.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.menu-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 12px 24px 20px;
  border-top: 1px solid var(--color-border);
}

.nav-mobile.is-open {
  display: flex;
}

.nav-mobile a {
  padding: 12px 4px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.nav-mobile .btn {
  margin-top: 8px;
}

/* ============ Hero (breve, centrado, sin mockup al lado) ============ */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
  border-bottom: 1px solid var(--color-border);
  padding: 60px 24px;
  text-align: center;
}

/* Manchas de color muy tenues, decorativas: dos radiales del acento en
   esquinas opuestas, lo bastante suaves para no competir con el texto */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.hero::before {
  top: -160px;
  right: -140px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(10, 10, 10, 0.16) 0%, rgba(10, 10, 10, 0) 70%);
}

.hero::after {
  bottom: -180px;
  left: -160px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(10, 10, 10, 0.1) 0%, rgba(10, 10, 10, 0) 70%);
}

.hero-intro {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}

.hero h1 {
  font-size: 2.4rem;
  margin-bottom: 20px;
}

.hero-subtitle {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  margin: 0 auto 32px;
  max-width: 520px;
}

.hero-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.hero-trust-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--color-accent);
}

/* ============ Recorrido por la app (scrollytelling, 8 secciones) ============ */
.scrolly {
  padding: 16px 0;
}

.scrolly-item {
  padding: 40px 0;
}

.scrolly-item-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

.scrolly-text h2 {
  font-size: 2rem;
  margin-bottom: 14px;
}

.scrolly-text p {
  font-size: 1.05rem;
  color: var(--color-text-muted);
}

.scrolly-media {
  perspective: 900px;
}

@media (min-width: 860px) {
  .scrolly-item {
    padding: 56px 0;
  }

  .scrolly-item-inner {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    min-height: 60vh;
  }

  .scrolly-item--reverse .scrolly-media {
    order: -1;
  }
}

/* ============ Comparativa (problema/solución) ============ */
.comparativa {
  padding: 56px 0;
}

.comparativa-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.comparativa-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-card);
  text-align: left;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.comparativa-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-hover);
}

.icono {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(10, 10, 10, 0.1);
  color: var(--color-accent);
  margin-bottom: 16px;
}

.icono svg {
  width: 22px;
  height: 22px;
}

.comparativa-card h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.comparativa-card p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* Envoltorio que flota en bucle; separado del marco que recibe el tilt
   del mouse, para que ambas animaciones (flotado + inclinacion) no
   compitan por la misma propiedad transform en el mismo elemento.
   Se usa en las recreaciones del recorrido (.scrolly-media). */
.float-wrapper {
  perspective: 900px;
  animation: floatY 3.6s ease-in-out infinite;
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Marco de ventana: barra superior + contenido, para que cada captura
   se sienta como una ventana real de aplicacion */
.window-frame {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease-out, box-shadow 0.2s ease, border-color 0.2s ease;
  will-change: transform;
}

.window-frame.is-hovering {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-hover);
}

/* Barra de titulo estilo Windows: marca a la izquierda, controles a la derecha */
.window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px 9px 12px;
  background: #1a1c1f;
}

.window-bar-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.window-app-icon {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--color-accent);
}

.window-app-title {
  font-size: 0.62rem;
  font-weight: 500;
  color: #b7bbc2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.window-controls {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.window-control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: #8a8f97;
}

.window-control svg {
  width: 9px;
  height: 9px;
}

.screenshot-placeholder {
  aspect-ratio: 16 / 10;
  background: #fff;
  overflow: hidden;
}

/* ============ Maquetas HTML/CSS de las pantallas (recorrido) ============ */
.mock {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  color: var(--color-text);
  background: #fff;
  text-align: left;
}

/* --- Inventario: sidebar + tabla --- */
.mock-inventario {
  flex-direction: row;
}

/* --- Panel principal: saludo + tarjetas + actividad reciente --- */
.mock-panel {
  flex-direction: row;
}

.mock-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.mock-panel-saludo {
  font-size: 0.7rem;
  font-weight: 800;
}

.mock-panel-fecha {
  font-size: 0.42rem;
  color: var(--color-text-muted);
}

.mock-panel-hora {
  font-size: 0.56rem;
  font-weight: 700;
}

.mock-panel-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.mock-panel-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  padding: 6px;
}

.mock-panel-card--cta {
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: var(--app-accent);
  color: #fff;
  font-size: 0.46rem;
  font-weight: 700;
}

.mock-panel-card--cta svg {
  width: 14px;
  height: 14px;
}

.mock-panel-card-value {
  font-size: 0.62rem;
  font-weight: 800;
}

.mock-panel-card-label {
  font-size: 0.36rem;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

.mock-panel-card-pill {
  align-self: flex-start;
  margin-top: 2px;
  font-size: 0.34rem;
  font-weight: 700;
  color: var(--app-success);
  background: var(--app-success-bg);
  border-radius: 999px;
  padding: 1px 5px;
}

.mock-panel-actividad {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  padding: 8px;
  overflow: hidden;
}

.mock-panel-actividad-titulo {
  font-size: 0.5rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.mock-panel-actividad-fila {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.42rem;
  color: var(--color-text-muted);
  padding: 3px 0;
  border-top: 1px solid var(--color-border);
}

.mock-panel-actividad-fila:first-of-type {
  border-top: none;
}

.mock-panel-actividad-fila span:first-child {
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Historial: sidebar + sub-navegación + tabla --- */
.mock-historial {
  flex-direction: row;
}

.mock-subnav {
  flex-shrink: 0;
  width: 54px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 4px;
  background: #fff;
  border-right: 1px solid var(--color-border);
}

.mock-subnav-item {
  font-size: 0.38rem;
  font-weight: 600;
  padding: 3px 4px;
  border-radius: 4px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mock-subnav-item--active {
  background: var(--app-accent-bg);
  color: var(--app-accent);
}

.mock-filtros {
  display: flex;
  gap: 4px;
}

.mock-filtro {
  font-size: 0.4rem;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 5px;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text-muted);
}

.mock-filtro--activo {
  background: var(--app-accent);
  border-color: var(--app-accent);
  color: #fff;
}

.mock-badge-ok {
  font-size: 0.38rem;
  font-weight: 700;
  color: var(--app-success);
  background: var(--app-success-bg);
  border-radius: 999px;
  padding: 1px 6px;
  white-space: nowrap;
}

/* --- Barra lateral de la app real: ítems con ícono + etiqueta, más el
   bloque de usuario/caja/plan y los accesos de cuenta al pie --- */
.mock-sidebar {
  flex-shrink: 0;
  width: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  background: #1e2530;
}

/* Sidebar real de la app (recreaciones del recorrido, .mock--real): más
   ancha, con etiqueta junto al ícono, en vez del riel angosto de solo íconos
   que sigue usando "Así se ve por dentro" más abajo en la página. */
.mock--real .mock-sidebar {
  width: 88px;
  align-items: stretch;
  gap: 1px;
  padding: 6px 5px;
  background: var(--app-bg);
  border-right: 1px solid var(--color-border);
  overflow: hidden;
}

.mock-nav-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 4px;
  border-radius: 5px;
  color: #6b7280;
}

.mock-nav-item--active {
  background: var(--app-accent-bg);
  color: var(--app-accent);
}

.mock-nav-label {
  font-size: 0.4rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mock-sidebar-divider {
  height: 1px;
  background: var(--color-border);
  margin: 4px 2px;
}

.mock-usuario {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 3px 4px;
}

.mock-usuario-nombre {
  font-size: 0.42rem;
  font-weight: 700;
  color: var(--color-text);
}

.mock-usuario-linea {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.36rem;
  font-weight: 600;
  color: var(--app-success);
  white-space: nowrap;
}

.mock-dot {
  width: 4px;
  height: 4px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--app-success);
}

.mock-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 6px;
  color: #8b93a1;
}

.mock-icon svg {
  width: 13px;
  height: 13px;
}

.mock-icon--active {
  background: var(--color-accent);
  color: #fff;
}

/* En las recreaciones reales el ícono va dentro de un .mock-nav-item que ya
   marca el estado activo con fondo propio, así que el ícono es más chico y
   simplemente hereda el color de la fila (ver .mock-nav-item--active). */
.mock--real .mock-icon {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  color: inherit;
}

.mock--real .mock-icon svg {
  width: 11px;
  height: 11px;
}

.mock-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--color-bg-alt);
}

.mock-search {
  font-size: 0.62rem;
  color: var(--color-text-muted);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 4px 10px;
}

/* Encabezado de pantalla con título + botones de acción (Inventario, Historial) */
.mock-pantalla-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mock-pantalla-titulo {
  font-size: 0.68rem;
  font-weight: 800;
}

.mock-pantalla-sub {
  font-size: 0.4rem;
  color: var(--color-text-muted);
  margin-top: 1px;
}

.mock-pantalla-acciones {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.mock-btn-mini {
  font-size: 0.4rem;
  font-weight: 700;
  padding: 4px 7px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  white-space: nowrap;
}

.mock-btn-mini--primario {
  background: var(--app-accent);
  border-color: var(--app-accent);
  color: #fff;
}

.mock-stock-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.42rem;
  font-weight: 700;
  color: var(--app-success);
  background: var(--app-success-bg);
  border-radius: 999px;
  padding: 2px 6px;
  white-space: nowrap;
}

/* Mismo tono ámbar que .mock-row--low (stock bajo): "necesita atención", no
   necesariamente "error" — se usa para saldo deudor en Cuenta corriente. */
.mock-deuda-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.42rem;
  font-weight: 700;
  color: #b45309;
  background: rgba(217, 119, 6, 0.14);
  border-radius: 999px;
  padding: 2px 6px;
  white-space: nowrap;
}

.mock-product-sub {
  font-size: 0.4rem;
  color: var(--color-text-muted);
  font-weight: 400;
}

.mock-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  overflow: hidden;
  font-size: 0.5rem;
}

.mock-table th,
.mock-table td {
  padding: 4px 6px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mock-table th {
  background: #eef0f2;
  color: var(--color-text-muted);
  font-weight: 600;
}

.mock-table td {
  border-top: 1px solid var(--color-border);
}

.mock-row--low td {
  background: rgba(217, 119, 6, 0.12);
}

/* --- Vender: grilla de productos + panel de venta --- */
.mock-vender {
  flex-direction: row;
  position: relative; /* referencia para el cursor simulado del hero */
}

/* La recreación real agrega la barra lateral de la app + un encabezado
   propio (título + atajos) arriba de la grilla de productos y el panel de
   cobro: .mock-vender queda como fila (sidebar + columna de contenido). */
.mock-vender-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mock-vender-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--color-border);
  background: #fff;
}

.mock-vender-titulo {
  font-size: 0.56rem;
  font-weight: 800;
}

.mock-vender-body {
  flex: 1;
  min-height: 0;
  display: flex;
}

.mock-products {
  flex: 1.2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  align-content: start;
  padding: 10px;
  background: var(--color-bg-alt);
}

.mock-product {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  padding: 6px;
}

/* En la app real cada producto es una fila angosta (sin placeholder de
   imagen): nombre + marca a la izquierda, precio + stock a la derecha */
.mock--real .mock-products {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: #fff;
}

.mock--real .mock-product {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--color-border);
  padding: 7px 9px;
}

.mock-product-info {
  min-width: 0;
}

.mock-product-marca {
  font-size: 0.4rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.mock-product-marca span {
  font-weight: 400;
}

.mock-product-precio-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

/* Destello de acento cuando el cursor simulado "clickea" un producto */
.mock-product.is-flash {
  animation: mockProductFlash 0.5s ease;
}

/* Recreaciones reales: el destello usa el azul de la app en vez del verde
   de esta landing (mismo timing, solo cambia el color vía animation-name) */
.mock--real .mock-product.is-flash {
  animation-name: mockProductFlashReal;
}

@keyframes mockProductFlashReal {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
    border-color: var(--color-border);
  }
  35% {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
    border-color: var(--app-accent);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
    border-color: var(--color-border);
  }
}

@keyframes mockProductFlash {
  0% {
    box-shadow: 0 0 0 0 rgba(10, 10, 10, 0);
    border-color: var(--color-border);
  }
  35% {
    box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.35);
    border-color: var(--color-accent);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(10, 10, 10, 0);
    border-color: var(--color-border);
  }
}

.mock-product-img {
  aspect-ratio: 1 / 1;
  background: #e3e5e8;
  border-radius: 5px;
  margin-bottom: 4px;
}

.mock-product-name {
  font-size: 0.54rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mock-product-price {
  font-size: 0.5rem;
  color: var(--color-text-muted);
}

.mock--real .mock-product-price {
  font-size: 0.64rem;
  color: var(--app-accent);
  font-weight: 700;
}

.mock-sale {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: #fff;
  border-left: 1px solid var(--color-border);
}

.mock-sale-title {
  font-size: 0.62rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.mock-sale-line {
  display: flex;
  gap: 5px;
  font-size: 0.5rem;
  color: var(--color-text-muted);
}

/* Aparición de una línea agregada por la venta simulada del hero (nunca se
   aplica a las líneas estáticas de "Así se ve por dentro") */
.mock-sale-line--nueva {
  animation: mockSaleLineIn 0.25s ease;
}

@keyframes mockSaleLineIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mock-sale-line span:first-child {
  flex: 1;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mock-sale-total {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid var(--color-border);
  font-weight: 800;
  font-size: 0.72rem;
}

.mock-sale-btn {
  position: relative;
  background: var(--color-accent);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 7px;
  font-size: 0.54rem;
  font-weight: 700;
  transition: transform 0.15s ease;
}

/* En la app real el botón de confirmar es verde (éxito), no el acento */
.mock--real .mock-sale-btn {
  background: var(--app-success);
}

/* Grilla decorativa de medios de pago (Efectivo/Débito/Crédito/QR·MP),
   estática: la venta simulada no la toca, solo agrega líneas y el total. */
.mock-medios-pago {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.mock-medio {
  font-size: 0.4rem;
  font-weight: 600;
  text-align: center;
  padding: 4px 3px;
  border-radius: 5px;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  background: #fff;
}

.mock-medio--activo {
  border-color: var(--app-accent);
  color: var(--app-accent);
  background: var(--app-accent-bg);
  font-weight: 700;
}

.mock-sale-btn.is-clicking {
  transform: scale(0.94);
}

/* Check de éxito que aparece al confirmar la venta simulada del hero */
.mock-sale-check {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  color: #fff;
}

.mock-sale-check svg {
  width: 100%;
  height: 100%;
}

/* Cursor simulado (solo en el slide "Vender" del carrusel del hero) */
.hero-cursor {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 15px;
  height: 15px;
  color: var(--color-text);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  transition: left 0.6s ease, top 0.6s ease, transform 0.15s ease, opacity 0.25s ease;
}

.hero-cursor svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hero-cursor.is-visible {
  opacity: 1;
}

.hero-cursor.is-clicking {
  transform: scale(0.7);
}

/* --- Información: total + mini grafico + metricas --- */
.mock-info {
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
}

/* La recreación real agrega la barra lateral de la app; el padding/gap pasa
   a vivir en .mock-main (reutilizado) en vez de en .mock-info directamente */
.mock-info.mock--real {
  flex-direction: row;
  gap: 0;
  padding: 0;
}

.mock-reportes-titulo {
  font-size: 0.6rem;
  font-weight: 800;
}

.mock-reportes-sub {
  font-size: 0.36rem;
  color: var(--color-text-muted);
}

.mock-reportes-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 6px;
}

.mock-reportes-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  padding: 6px;
}

.mock-reportes-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: var(--app-accent-bg);
  color: var(--app-accent);
}

.mock-reportes-card-icon svg {
  width: 10px;
  height: 10px;
}

.mock-reportes-card-value {
  font-size: 0.6rem;
  font-weight: 800;
}

.mock-reportes-card-label {
  font-size: 0.34rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

.mock-top10-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 6px;
}

.mock-top10 {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  padding: 7px;
}

.mock-top10-titulo {
  font-size: 0.42rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.mock-top10-fila {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
  font-size: 0.38rem;
  color: var(--color-text);
  border-top: 1px solid var(--color-border);
}

.mock-top10-fila:first-of-type {
  border-top: none;
}

.mock-top10-num {
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-weight: 600;
  width: 10px;
}

.mock-top10-nombre {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mock-top10-valor {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--color-text-muted);
}

.mock-info-hero {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 9px;
  padding: 10px 12px;
}

.mock-info-value {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.mock-info-caption {
  font-size: 0.5rem;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.mock-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 38px;
}

.mock-bars span {
  flex: 1;
  background: #d7dade;
  border-radius: 2px 2px 0 0;
  transition: height 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.mock-bars span:nth-child(1) { transition-delay: 0ms; }
.mock-bars span:nth-child(2) { transition-delay: 50ms; }
.mock-bars span:nth-child(3) { transition-delay: 100ms; }
.mock-bars span:nth-child(4) { transition-delay: 150ms; }
.mock-bars span:nth-child(5) { transition-delay: 200ms; }
.mock-bars span:nth-child(6) { transition-delay: 250ms; }
.mock-bars span:nth-child(7) { transition-delay: 300ms; }

.mock-bar--accent {
  background: var(--color-accent);
}

.mock--real .mock-bar--accent {
  background: var(--app-accent);
}

.mock-info-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.mock-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 7px;
  padding: 8px;
}

.mock-metric-value {
  font-size: 0.76rem;
  font-weight: 800;
}

.mock-metric-label {
  font-size: 0.46rem;
  color: var(--color-text-muted);
}

/* --- Imprimir/Exportar PDF: recreación del documento real (paleta fija
   negro sobre blanco, SIEMPRE clara, igual que DocumentoImprimibleLayout.tsx
   en la app — no usa colores de tema, es el mismo documento impreso). Se
   muestra como una hoja A4 suelta con sombra, en vez del marco de ventana
   que usan los demás pasos del recorrido: es justamente lo que la
   diferencia — no es una pantalla de la app, es lo que descargás. */
.scrolly-media--hoja {
  display: flex;
  justify-content: center;
}

.paper-sheet {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 210 / 280;
  background: #ffffff;
  color: #0a0a0a;
  border-radius: 3px;
  box-shadow: var(--shadow-card-hover);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', sans-serif;
  text-align: left;
}

.paper-ribbon {
  position: absolute;
  top: -8px;
  right: 14px;
  background: var(--app-accent);
  color: #fff;
  font-size: 0.44rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.paper-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid #0a0a0a;
}

.paper-marca {
  height: 11px;
  width: auto;
}

.paper-titulos {
  margin-top: 6px;
}

.paper-titulos h3 {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
}

.paper-titulos p {
  font-size: 0.4rem;
  color: #6b6a66;
  font-weight: 500;
  margin: 2px 0 0;
}

.paper-meta {
  text-align: right;
  font-size: 0.36rem;
  color: #6b6a66;
  line-height: 1.6;
  white-space: nowrap;
}

.paper-meta strong {
  color: #0a0a0a;
  font-weight: 700;
}

.paper-meta .paper-negocio {
  display: block;
  font-size: 0.42rem;
  font-weight: 700;
  color: #0a0a0a;
  margin-bottom: 2px;
}

.paper-body {
  flex: 1;
  margin-top: 10px;
}

.paper-tabla-titulo {
  font-size: 0.34rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b6a66;
  margin-bottom: 4px;
}

.paper-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.4rem;
}

.paper-table thead th {
  text-align: left;
  font-size: 0.32rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #6b6a66;
  padding: 0 4px 4px;
  border-bottom: 1.5px solid #0a0a0a;
}

.paper-table thead th.num {
  text-align: right;
}

.paper-table tbody td {
  padding: 4px;
  border-bottom: 1px solid #e7e5e0;
  color: #0a0a0a;
}

.paper-table tbody td.num {
  text-align: right;
  font-weight: 600;
}

.paper-table tbody td.muted {
  color: #6b6a66;
}

.paper-table tbody tr:nth-child(even) td {
  background: #f7f7f5;
}

.paper-footer {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid #e7e5e0;
  display: flex;
  justify-content: space-between;
  font-size: 0.3rem;
  color: #6b6a66;
}

.paper-footer strong {
  color: #0a0a0a;
  font-weight: 700;
}

/* --- Asistente / Copiloto: intercambio tipo chat dentro de la misma
   pantalla mockeada (sidebar + contenido) que el resto del recorrido --- */
.mock-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.mock-chat-burbuja {
  max-width: 82%;
  padding: 6px 9px;
  border-radius: 9px;
  font-size: 0.46rem;
  line-height: 1.4;
}

.mock-chat-burbuja--usuario {
  align-self: flex-end;
  background: var(--app-accent);
  color: #fff;
  border-bottom-right-radius: 2px;
}

.mock-chat-burbuja--asistente {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--color-border);
  border-bottom-left-radius: 2px;
}

.mock-chat-link {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 5px;
  font-size: 0.4rem;
  font-weight: 700;
  color: var(--app-accent);
  background: var(--app-accent-bg);
  border-radius: 999px;
  padding: 3px 8px;
}

/* ============ Grilla de funciones ============ */
.funciones {
  padding: 60px 0;
  text-align: center;
}

.funciones h2 {
  font-size: 2.1rem;
  margin-bottom: 20px;
}

.funciones h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin: 14px auto 0;
  background: var(--color-accent);
  border-radius: 2px;
}

.funciones-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  text-align: left;
}

.funcion-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.funcion-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-hover);
}

.funcion-card .icono {
  width: 36px;
  height: 36px;
  margin-bottom: 14px;
}

.funcion-card .icono svg {
  width: 19px;
  height: 19px;
}

.funcion-card h3 {
  font-size: 1rem;
  margin-bottom: 6px;
}

.funcion-tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-bg-tint);
  color: var(--color-accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.funcion-card p {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* ============ Rubros ============ */
.rubros {
  padding: 48px 0;
  background: var(--color-bg-tint);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.rubros-inner {
  text-align: center;
}

.rubros h2 {
  font-size: 1.7rem;
  margin-bottom: 16px;
}

.rubros h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin: 14px auto 0;
  background: var(--color-accent);
  border-radius: 2px;
}

.rubros-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.rubro-badge {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: border-color 0.15s ease, color 0.15s ease;
  color: var(--color-text);
  box-shadow: var(--shadow-card);
}

.rubro-badge:hover {
  border-color: var(--border-hover);
  color: var(--color-accent-dark);
}

/* ============ Prueba gratis (protagonista, antes de los planes pagos) ============ */
.prueba-gratis {
  padding: 64px 0;
  background: var(--color-bg-tint);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}

.prueba-gratis-inner {
  max-width: 560px;
  margin: 0 auto;
}

.prueba-gratis h2 {
  font-size: 2rem;
  margin-bottom: 14px;
}

.prueba-gratis-sub {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  margin-bottom: 28px;
}

/* ============ Planes ============ */
.planes {
  padding: 60px 0;
  text-align: center;
}

.planes h2 {
  font-size: 2rem;
  margin-bottom: 8px;
}

.planes-subtitle {
  color: var(--color-text-muted);
  margin-bottom: 28px;
}

.promo-banner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 28px;
  padding: 16px 24px;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  border-radius: var(--radius-lg);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: var(--shadow-btn);
}

.promo-banner-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.promo-banner-progreso {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}

.promo-banner-progreso-fill {
  display: block;
  height: 100%;
  background: #fff;
  border-radius: inherit;
  transition: width 0.3s ease;
}

.promo-banner-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.promo-banner-badge {
  display: inline-block;
  background: #fff;
  color: var(--color-accent-dark);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 6px;
  margin-right: 4px;
}

.promo-banner-urgencia {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.2);
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ============ Selector de período (mensual/anual) ============ */
.periodo-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.periodo-toggle {
  display: inline-flex;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 4px;
}

.periodo-btn {
  border: none;
  background: none;
  padding: 8px 20px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.periodo-btn.is-active {
  background: var(--color-accent);
  color: #fff;
}

.periodo-ahorro {
  background: rgba(10, 10, 10, 0.12);
  color: var(--color-accent-dark);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
}

.planes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  text-align: left;
}

.plan-card {
  position: relative;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-hover);
}

.plan-card h3 {
  font-size: 1.15rem;
  margin-bottom: 12px;
}

.plan-card .precio {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.precio-tachado {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: line-through;
  margin-right: 8px;
}

.precio-equivalente,
.precio-nota {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.plan-card .precio-periodo {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.plan-card ul {
  margin-top: 16px;
  margin-bottom: 28px;
  flex-grow: 1;
}

.stat-contador {
  font-weight: 800;
  color: var(--color-accent-dark);
}

.plan-card li {
  padding: 8px 0 8px 26px;
  position: relative;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  border-top: 1px solid var(--color-border);
}

.plan-card li:first-child {
  border-top: none;
}

.plan-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(-45deg);
}

.plan-card .btn {
  width: 100%;
}

/* Tarjeta destacada: antes tenía un borde con degradado acento→teal (via
   padding-box/border-box); en la paleta neutra un borde sólido del acento ya
   se distingue sin necesitar un segundo color — mismo criterio que la app,
   que tampoco usa bordes con degradado de dos tonos. */
.plan-destacado {
  border: 2px solid var(--color-accent);
  background: var(--color-bg);
  box-shadow: var(--shadow-card-hover);
}

.plan-destacado:hover {
  transform: translateY(-6px);
}

.badge {
  position: absolute;
  top: -12px;
  left: 28px;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(10, 10, 10, 0.3);
}

/* ============ Preguntas frecuentes ============ */
.faq {
  padding: 60px 0;
  background: var(--color-bg-tint);
  text-align: center;
}

.faq h2 {
  font-size: 2.1rem;
  margin-bottom: 20px;
}

.faq h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin: 14px auto 0;
  background: var(--color-accent);
  border-radius: 2px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}

.faq-item {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 3px solid transparent;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.faq-item.is-open {
  border-left-color: var(--color-accent);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--color-text);
  text-align: left;
  transition: background 0.15s ease;
}

.faq-question:hover {
  background: var(--color-bg-alt);
}

.faq-question:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.faq-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  transition: transform 0.25s ease, color 0.15s ease;
}

.faq-item.is-open .faq-icon {
  transform: rotate(180deg);
  color: var(--color-accent);
}

/* Animacion de apertura via CSS grid: transiciona la fila de 0fr a 1fr,
   evita tener que medir scrollHeight con JS para un alto automatico */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer-inner {
  overflow: hidden;
}

.faq-answer p {
  padding: 0 20px 18px;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ============ Cierre final ============ */
.cta-final {
  padding: 56px 0;
  text-align: center;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
}

.cta-final h2 {
  color: #fff;
  font-size: 2.1rem;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}

/* Sobre el fondo negro del cierre final (mismo degradado de acento que el
   resto de la app), el botón queda blanco sólido en vez del degradado de
   acento de .btn-shine — que se perdería sobre un fondo del mismo color. */
.btn-cta {
  background: #fff;
  color: var(--color-accent-dark);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 12px 28px rgba(0, 0, 0, 0.18);
}

.btn-cta:hover {
  background: var(--color-bg-alt);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 18px 36px rgba(0, 0, 0, 0.22);
}

/* ============ Footer ============ */
.site-footer {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  padding: 40px 0;
}

.footer-inner {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.footer-brand {
  color: var(--color-text);
  font-weight: 700;
  margin-bottom: 6px;
}

.footer-copy,
.footer-contacto {
  margin-top: 4px;
}

.footer-legal {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 14px;
}

.footer-legal a {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  transition: color 0.15s ease;
}

.footer-legal a:hover {
  color: var(--color-accent);
}

/* ============ Páginas legales (Términos / Privacidad) ============ */
.legal {
  padding: 56px 0 80px;
}

.legal-container {
  max-width: 720px;
}

.legal-header {
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}

.legal-header h1 {
  font-size: 2rem;
  margin-bottom: 8px;
}

.legal-meta {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.legal-body p {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  margin-bottom: 18px;
}

.legal-body h2 {
  font-size: 1.35rem;
  margin-top: 40px;
  margin-bottom: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.legal-body h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.legal-body h3 {
  font-size: 1.05rem;
  margin-top: 24px;
  margin-bottom: 10px;
  color: var(--color-text);
}

.legal-body ul {
  margin: 0 0 18px;
  padding-left: 0;
  list-style: none;
}

.legal-body ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.legal-body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* Listas con inciso a) b) c): igual que .legal-body ul pero con letra en vez de punto */
.legal-list-alpha {
  margin: 0 0 18px;
  padding-left: 0;
  list-style: none;
  counter-reset: legal-alpha;
}

.legal-list-alpha li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  counter-increment: legal-alpha;
}

.legal-list-alpha li::before {
  content: counter(legal-alpha, lower-alpha) ")";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--color-accent-dark);
}

.legal-body strong {
  color: var(--color-text);
  font-weight: 700;
}

.legal-footer-nav {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.legal-footer-nav a {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.95rem;
}

.legal-footer-nav a:hover {
  color: var(--color-accent-dark);
}

/* ============ Responsive ============ */
@media (min-width: 640px) {
  .comparativa-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .capturas-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .funciones-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .planes-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero h1 {
    font-size: 2.9rem;
  }
}

@media (min-width: 960px) {
  .funciones-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 860px) {
  .nav-desktop {
    display: flex;
  }

  .btn-header {
    display: inline-block;
  }

  .menu-toggle {
    display: none;
  }

  .nav-mobile {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  /* El hero debe ser inequivocamente el elemento mas grande de la pagina */
  .hero h1 {
    font-size: 3.4rem;
  }
}

/* ============ Animacion de aparicion al hacer scroll ============ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .float-wrapper {
    animation: none;
  }

  .window-frame {
    transition: none;
  }
}

/* ============ Página de instalación (guía paso a paso) ============ */
.instalar-hero {
  padding: 56px 0 40px;
  text-align: center;
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
  border-bottom: 1px solid var(--color-border);
}

.instalar-hero h1 {
  font-size: 2rem;
  margin-bottom: 14px;
}

.instalar-hero-subtitle {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  max-width: 560px;
  margin: 0 auto;
}

.instalar-pasos {
  padding: 56px 0;
}

.paso-instalar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 32px 24px;
  margin-bottom: 28px;
}

.paso-instalar-numero {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-weight: 800;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(10, 10, 10, 0.35);
}

.paso-instalar-cuerpo h2 {
  font-size: 1.3rem;
  margin-bottom: 12px;
}

.paso-instalar-cuerpo p {
  font-size: 1.02rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 12px;
}

.paso-instalar-cuerpo p strong {
  color: var(--color-text);
}

.paso-instalar--destacado {
  border: 2px solid var(--color-accent);
  background: var(--color-bg);
  box-shadow: var(--shadow-card-hover);
}

.paso-instalar-badge {
  position: absolute;
  top: -14px;
  left: 24px;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(10, 10, 10, 0.3);
}

.instalar-sub-pasos {
  list-style: decimal;
  margin: 0 0 8px 22px;
  color: var(--color-text-muted);
  font-size: 1.02rem;
  line-height: 1.8;
}

.instalar-sub-pasos strong {
  color: var(--color-text);
}

.paso-instalar-visual {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: center;
  align-items: center;
  padding: 24px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin: 6px 0 20px;
}

/* Ícono grande genérico (paso 1) */
.instalar-icono-grande {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: rgba(10, 10, 10, 0.12);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.instalar-icono-grande svg {
  width: 36px;
  height: 36px;
}

.mock-caption {
  margin-top: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: center;
}

/* Carpeta "Descargas" (paso 2) */
.mock-carpeta {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mock-carpeta-icono {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
}

.mock-carpeta-icono svg {
  width: 30px;
  height: 30px;
}

/* Barra de descargas del navegador (paso 2) */
.mock-descarga-navegador {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mock-descarga-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 16px;
  box-shadow: var(--shadow-card);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
}

.mock-descarga-icon svg {
  width: 18px;
  height: 18px;
  color: var(--color-accent);
  display: block;
}

.mock-descarga-check {
  display: flex;
  color: var(--color-accent);
}

.mock-descarga-check svg {
  width: 16px;
  height: 16px;
}

/* Aviso de Windows SmartScreen (paso 3) */
.mock-smartscreen {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: var(--shadow-card-hover);
  padding: 26px 22px 22px;
  text-align: left;
}

.mock-smartscreen-close {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 1.1rem;
  color: #9aa0a8;
  line-height: 1;
}

.mock-smartscreen-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(0, 103, 192, 0.1);
  color: #0067c0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.mock-smartscreen-icon svg {
  width: 24px;
  height: 24px;
}

.mock-smartscreen-titulo {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 8px;
}

.mock-smartscreen-texto {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}

.mock-smartscreen-mas {
  position: relative;
  display: inline-flex;
  margin-bottom: 16px;
}

.mock-smartscreen-link {
  color: #0067c0;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: underline;
}

.mock-smartscreen-detalle {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 18px;
}

.mock-smartscreen-detalle p {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin: 2px 0;
}

.mock-smartscreen-botones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.mock-smartscreen-btn {
  padding: 9px 16px;
  border-radius: 4px;
  font-size: 0.82rem;
  font-weight: 600;
}

.mock-smartscreen-btn--secundario {
  background: #f3f3f3;
  color: #3a3a3a;
  border: 1px solid #d8d8d8;
}

.mock-smartscreen-btn--primario {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #0067c0;
  color: #fff;
}

/* Numeritos de guía (nuestros, no de Windows) que señalan dónde hacer clic */
.mock-smartscreen-num {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-weight: 800;
  font-size: 0.68rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(10, 10, 10, 0.4);
  animation: pulseNum 1.8s ease-in-out infinite;
}

.mock-smartscreen-btn--primario .mock-smartscreen-num {
  position: static;
  box-shadow: none;
  animation: none;
}

@keyframes pulseNum {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* Asistente de instalación de Windows (paso 4) — un solo estado representativo
   (no hace falta animar los 3 pasos reales del wizard, ver electron-builder.yml
   nsis: oneClick:false + allowToChangeInstallationDirectory:true). Mismo
   criterio visual que el resto de las maquetas: negro/blanco, sobrio — a
   diferencia de .mock-smartscreen (que sí usa el azul real de Windows, porque
   ahí lo relevante es que se vea igual a la advertencia real del sistema),
   acá lo que importa es solo mostrar que existe un botón para avanzar. */
.mock-instalador {
  position: relative;
  width: 100%;
  max-width: 340px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: var(--shadow-card-hover);
  padding: 26px 22px 22px;
  text-align: left;
}

.mock-instalador-close {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 1.1rem;
  color: #9aa0a8;
  line-height: 1;
}

.mock-instalador-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(10, 10, 10, 0.08);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.mock-instalador-icon svg {
  width: 24px;
  height: 24px;
}

.mock-instalador-titulo {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 8px;
}

.mock-instalador-texto {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 18px;
}

.mock-instalador-botones {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.mock-instalador-btn {
  padding: 9px 16px;
  border-radius: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  background: #f3f3f3;
  color: #3a3a3a;
  border: 1px solid #d8d8d8;
}

.mock-instalador-btn--primario {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

/* Pantalla de bienvenida (paso 5) */
.mock-bienvenida {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 420px;
}

.mock-bienvenida-opcion {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text);
  box-shadow: var(--shadow-card);
}

.mock-bienvenida-icono {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(10, 10, 10, 0.12);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mock-bienvenida-icono svg {
  width: 18px;
  height: 18px;
}

/* ============ Sección de ayuda (fin de instalar.html) ============ */
.instalar-ayuda {
  padding: 64px 0;
  text-align: center;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
}

.instalar-ayuda h2 {
  color: #fff;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.instalar-ayuda p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.02rem;
  max-width: 520px;
  margin: 0 auto 26px;
  line-height: 1.6;
}

@media (min-width: 640px) {
  .paso-instalar {
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    padding: 36px 32px;
  }

  .instalar-hero h1 {
    font-size: 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mock-smartscreen-num {
    animation: none;
  }
}

/* ============ Página de gracias (post-pago) ============ */
.gracias-main {
  min-height: calc(100vh - 68px);
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
}

.gracias-content {
  max-width: 560px;
  padding-top: 56px;
  padding-bottom: 56px;
}

.gracias-estado {
  text-align: center;
}

.gracias-estado-texto {
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.7;
}

.gracias-spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 24px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: graciasSpin 0.8s linear infinite;
}

@keyframes graciasSpin {
  to { transform: rotate(360deg); }
}

.gracias-check {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.12);
  color: var(--color-accent);
}

.gracias-check svg {
  width: 30px;
  height: 30px;
}

#estadoExito h1 {
  font-size: 1.9rem;
  margin-bottom: 8px;
}

.gracias-plan {
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 28px;
}

.gracias-codigo-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 20px 24px;
  margin: 0 0 28px;
}

.gracias-codigo-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}

.gracias-codigo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.gracias-codigo {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--color-accent-dark);
}

.gracias-copiar-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--color-accent);
  background: transparent;
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.gracias-copiar-btn:hover {
  background: rgba(10, 10, 10, 0.08);
}

.gracias-copiar-btn.is-copiado {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.gracias-pasos {
  text-align: left;
  margin-top: 32px;
  padding-left: 20px;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.9;
}

.gracias-instalar-link {
  text-align: center;
  margin-top: 20px;
}

.gracias-instalar-link a {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .gracias-spinner {
    animation-duration: 1.6s;
  }
}