/* ================================================================
   LA PORTADA DE fixhubpos.com
   ================================================================
   Solo llega a public/index.html (ver construir.mjs): la portada del
   taller es otra página con su propio CSS, y ninguna recibe el marcado
   de la otra.

   Sobre el diseño, para que se entienda por qué está así:

   · UN SOLO ACENTO. El morado de FixHub (--va) manda, y el cian
     (--pos-frio) aparece contado: en el subrayado de los títulos y en
     el brillo del hero. Dos acentos peleando es lo que hace que una
     página se vea de aficionado.

   · EL FONDO NO ES PLANO PERO TAMPOCO GRITA. Un halo morado muy abierto
     detrás del hero y tarjetas apenas más claras que el fondo. La
     profundidad la dan los bordes de 1px, no las sombras grandes.

   · RESPIRO ANTES QUE ADORNO. El espacio entre secciones (--pos-aire)
     es lo que hace que una página se lea cara. Se toca ahí antes que en
     cualquier otra cosa.

   · TIPOGRAFÍA CON SALTOS DE VERDAD. El título del hero, los de sección
     y el cuerpo están a distancias claras, y todos con clamp() para que
     el teléfono no reciba un titular de escritorio encogido.

   · SIN LIBRERÍAS. Ver el comentario de pos/js/portada-pos.js.
   ================================================================ */

/* Con sesión adentro no hay portada que mostrar: manda el programa. */
html.fx-dentro #home-saas { display: none; }

/* El buscador de productos, el carrito y el escáner son herramientas de
   quien trabaja: mientras no haya sesión, en esta página no hay catálogo
   que buscar ni nada que comprar. Con sesión vuelven. */
html:not(.fx-dentro) .vit-search-wrap,
html:not(.fx-dentro) .vit-carrito-wrapper,
html:not(.fx-dentro) #vit-btn-scan-nav,
/* "Repara aquí" pide hora en el taller de Talca: es del otro sitio. */
html:not(.fx-dentro) .vit-agenda-wrapper { display: none !important; }
/* La franja morada sí va acá, con su propio texto (ver avisoPos en
   comun/js/dominios.js). Se esconde con sesión, igual que la portada. */
html.fx-dentro #vit-aviso-home { display: none !important; }

#home-saas {
  /* El aire entre secciones. Bajó de clamp(64,9vw,116) porque la
     página quedaba larguísima: con ocho secciones, cada 40px de más
     entre ellas son 320px de scroll. Acá todavía respira. */
  --pos-aire:   clamp(44px, 5.5vw, 76px);
  /* Antes eran 1120px fijos: en una pantalla de 1600 quedaban 250px de
     margen muerto a cada lado y la página se veía encajonada. Ahora
     sigue el ancho de la ventana con un tope, para que en un monitor
     grande use el espacio sin que las líneas de texto se estiren a lo
     ancho de la mesa. Los párrafos tienen su propio tope aparte. */
  --pos-ancho:  min(1460px, 94vw);
  --pos-frio:   #22d3ee;
  --pos-carta:  rgba(255, 255, 255, 0.028);
  --pos-borde:  rgba(255, 255, 255, 0.09);
  --pos-borde2: rgba(255, 255, 255, 0.16);
  --pos-radio:  18px;

  /* Sin esto, en un teléfono angosto una palabra larga del titular
     ensancha la página entera y aparece scroll horizontal. */
  min-width: 0;
  color: var(--vtx2);
  /* Las secciones se acotan solas; el fondo del hero necesita todo el
     ancho, así que el contenedor no lo corta. */
  overflow-x: clip;
}

#home-saas .pos-seccion {
  max-width: var(--pos-ancho);
  margin: 0 auto;
  padding: var(--pos-aire) 20px 0;
}

/* ── Tipografía ────────────────────────────────────────────────── */
#home-saas .pos-h1 {
  margin: 0 0 18px;
  font-size: clamp(34px, 6.2vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--txt-titulo);
}
/* La segunda línea del titular. En la variante sobria no se distingue
   del resto —el titular entero en blanco— y cada variante decide si le
   pone acento; ver el bloque de variantes al final. */
#home-saas .pos-h1 em { font-style: normal; font-weight: inherit; color: inherit; }
#home-saas .pos-h2 {
  margin: 0 0 34px;
  font-size: clamp(24px, 3.4vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.022em;
  font-weight: 750;
  color: var(--txt-titulo);
  text-align: center;
}
/* Cuando hay bajada, el título se pega a ella y el aire lo pone la
   bajada. Cuando no la hay, el margen del título ya lo resuelve. */
#home-saas .pos-h2:has(+ .pos-sub) { margin-bottom: 10px; }
#home-saas .pos-sub {
  max-width: 600px;
  margin: 0 auto 34px;
  text-align: center;
  font-size: clamp(14.5px, 1.7vw, 17px);
  line-height: 1.6;
  color: var(--vtx3);
  text-wrap: balance;
}

/* ══════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════ */
#home-saas .pos-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
  text-align: left;
  max-width: var(--pos-ancho);
  margin: 0 auto;
  padding: clamp(40px, 5.5vw, 72px) 20px clamp(28px, 4vw, 48px);
}

/* ── La foto del taller detrás ─────────────────────────────────
   Es una foto del propio catálogo de FixHub, no una de banco de
   imágenes: el taller que llega a mirar reconoce un mesón de verdad.

   Va muy apagada a propósito. Una foto a plena luz detrás de un
   titular obliga a ponerle una sombra al texto, y ahí empieza a verse
   como un volante. Con brillo bajo, saturación baja y un velo que la
   apaga más hacia la izquierda —que es donde va el texto— la foto da
   ambiente y el titular no tiene que pelear con ella. */
/* De borde a borde, aunque el contenido del hero esté acotado: una foto
   que termina donde termina el texto se lee como una tarjeta, y una que
   cruza la pantalla entera se lee como el lugar donde pasa todo.
   El recorte lo garantiza el overflow-x:clip de #home-saas. */
#home-saas .pos-hero-foto {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 100vw;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
#home-saas .pos-hero-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* El centro de la foto es mesón vacío: ahí cae el texto. */
  object-position: 50% 55%;
  /* Esta foto ya viene oscura, así que casi no hay que apagarla — la
     anterior era una ilustración a plena luz y había que bajarla al 36%
     para que el titular no tuviera que pelear. Lo único que se le toca
     es la saturación: es muy azul y la marca es morada. */
  filter: saturate(0.62) brightness(0.78) contrast(1.04);
}
#home-saas .pos-hero-foto::after {
  content: ''; position: absolute; inset: 0;
  background:
    /* Un velo que aprieta a la izquierda, que es donde va el texto, y
       suelta a la derecha para que se vea el mesón y las herramientas. */
    linear-gradient(100deg, rgba(20,20,20,0.92) 18%, rgba(20,20,20,0.72) 44%, rgba(20,20,20,0.34) 74%, rgba(20,20,20,0.5)),
    /* Y funde el borde de abajo con la página, para que la foto no
       termine en una línea recta. */
    linear-gradient(0deg, var(--vb), transparent 34%),
    linear-gradient(180deg, rgba(106,27,154,0.16), transparent 50%);
}
/* El halo. Un óvalo muy abierto y muy suave detrás del titular: da
   profundidad sin que se lea como "un degradado". Va en su propio
   elemento y no en el fondo del hero para poder desbordarlo sin
   arrastrar el texto. */
#home-saas .pos-hero-luz {
  position: absolute;
  z-index: -1;
  top: -34%; left: 28%;
  width: min(1500px, 160vw);
  aspect-ratio: 1.6 / 1;
  transform: translateX(-50%);
  background:
    radial-gradient(48% 46% at 50% 42%, rgba(206,147,216,0.17), transparent 68%),
    radial-gradient(30% 34% at 72% 30%, rgba(34,211,238,0.10), transparent 70%);
  filter: blur(14px);
  pointer-events: none;
}
#home-saas .pos-hero-dentro { max-width: none; margin: 0; }

#home-saas .pos-hero-marca {
  display: inline-flex; align-items: baseline; gap: 7px;
  margin-bottom: 26px;
}
#home-saas .pos-hero-marca .vit-logo { font-size: 27px; cursor: default; }
#home-saas .pos-bajada {
  max-width: 560px;
  margin: 0 0 34px;
  font-size: clamp(15px, 2vw, 18.5px);
  line-height: 1.62;
  color: var(--vtx3);
  text-wrap: balance;
}

/* ── Botones ──────────────────────────────────────────────────── */
#home-saas .pos-botones {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start;
}
#home-saas .pos-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 15px; font-weight: 650;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.16s var(--ease-apple), box-shadow 0.16s var(--ease-apple),
              background 0.16s var(--ease-apple), border-color 0.16s var(--ease-apple);
}
#home-saas .pos-btn i { font-size: 16px; }
#home-saas .pos-btn:hover { transform: translateY(-1.5px); }
#home-saas .pos-btn:active { transform: translateY(0); }
#home-saas .pos-btn:focus-visible { outline: 2px solid var(--va); outline-offset: 3px; }

#home-saas .pos-btn-primario {
  background: linear-gradient(180deg, #b769c7, var(--color-accent-dark));
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 22px rgba(106,27,154,0.36);
}
#home-saas .pos-btn-primario:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 12px 30px rgba(106,27,154,0.46); }

#home-saas .pos-btn-fantasma {
  background: rgba(255,255,255,0.045);
  border-color: var(--pos-borde2);
  color: var(--vtx);
}
#home-saas .pos-btn-fantasma:hover { background: rgba(255,255,255,0.085); border-color: var(--va); }

#home-saas .pos-btn-borde {
  background: transparent; border-color: var(--pos-borde2); color: var(--vtx);
}
#home-saas .pos-btn-borde:hover { border-color: var(--va); background: rgba(206,147,216,0.08); }

#home-saas .pos-btn-grande { padding: 16px 30px; font-size: 16.5px; }

#home-saas .pos-hero-nota {
  margin: 18px 0 0; font-size: 13.5px; color: var(--txt-tenue, var(--vtx3));
}
#home-saas .pos-enlace {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--va); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
#home-saas .pos-enlace:hover { color: var(--vtx); }

/* ── Las cuatro promesas ──────────────────────────────────────── */
/* Cuatro columnas fijas, no auto-fit: con auto-fit, en un ancho
   intermedio entraban tres y la cuarta quedaba sola en una fila con
   media franja vacía al lado. Cuatro arriba, dos abajo, y nunca un
   hueco. */
#home-saas .pos-promesas {
  list-style: none; margin: clamp(26px, 3.5vw, 40px) 0 0; padding: 0;
  display: grid; gap: 1px;
  grid-template-columns: repeat(2, 1fr);
  background: var(--pos-borde);
  border: 1px solid var(--pos-borde);
  border-radius: var(--pos-radio);
  overflow: hidden;
}
#home-saas .pos-promesas li {
  background: var(--vb);
  padding: 18px 14px;
  display: flex; flex-direction: column; gap: 3px;
}
#home-saas .pos-promesas strong {
  font-size: 17px; font-weight: 750; color: var(--vtx);
  letter-spacing: -0.015em;
}
#home-saas .pos-promesas span { font-size: 12.5px; color: var(--vtx3); line-height: 1.35; }

/* ══════════════════════════════════════════════════════════════
   VISTAZO — pestañas
   ══════════════════════════════════════════════════════════════ */
#home-saas .pos-pestanas {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-bottom: 26px;
}
#home-saas .pos-pestana {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--pos-borde);
  background: var(--pos-carta);
  color: var(--vtx3);
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: color 0.15s var(--ease-apple), border-color 0.15s var(--ease-apple),
              background 0.15s var(--ease-apple);
}
#home-saas .pos-pestana i { font-size: 16px; }
#home-saas .pos-pestana:hover { color: var(--vtx); border-color: var(--pos-borde2); }
#home-saas .pos-pestana.activa {
  color: var(--vtx);
  background: rgba(206,147,216,0.12);
  border-color: rgba(206,147,216,0.45);
}
#home-saas .pos-pestana:focus-visible { outline: 2px solid var(--va); outline-offset: 2px; }

#home-saas .pos-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  border: 1px solid var(--pos-borde);
  border-radius: calc(var(--pos-radio) + 6px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  padding: clamp(22px, 3.4vw, 40px);
}
#home-saas .pos-panel[hidden] { display: none; }
#home-saas .pos-panel-texto h3 {
  margin: 0 0 12px;
  font-size: clamp(19px, 2.4vw, 25px);
  font-weight: 700; letter-spacing: -0.02em;
  color: var(--txt-titulo);
}
#home-saas .pos-panel-texto p {
  margin: 0 0 18px; font-size: 15px; line-height: 1.65; color: var(--vtx3);
}
#home-saas .pos-puntos { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
#home-saas .pos-puntos li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 14.5px; color: var(--vtx2);
}
#home-saas .pos-puntos i, #home-saas .pos-incluye i {
  color: var(--pos-frio); font-size: 15px; flex-shrink: 0; margin-top: 1px;
}

/* ══════════════════════════════════════════════════════════════
   PRECIOS
   ══════════════════════════════════════════════════════════════ */
#home-saas .pos-planes {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(216px, 100%), 1fr));
  align-items: stretch;
}
#home-saas .pos-plan {
  position: relative;
  display: flex; flex-direction: column; gap: 5px;
  border: 1px solid var(--pos-borde);
  border-radius: var(--pos-radio);
  background: var(--pos-carta);
  padding: 19px 16px 16px;
  transition: border-color 0.18s var(--ease-apple), transform 0.18s var(--ease-apple);
}
#home-saas .pos-plan:hover { border-color: var(--pos-borde2); transform: translateY(-2px); }
#home-saas .pos-plan-elegido {
  border-color: rgba(206,147,216,0.5);
  background: linear-gradient(180deg, rgba(206,147,216,0.09), rgba(206,147,216,0.02));
  box-shadow: 0 14px 40px rgba(106,27,154,0.18);
}
#home-saas .pos-plan-cinta {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  background: linear-gradient(180deg, #b769c7, var(--color-accent-dark));
  color: #fff; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(106,27,154,0.45);
}
#home-saas .pos-plan h3 { margin: 0; font-size: 14.5px; font-weight: 650; color: var(--vtx); }
#home-saas .pos-plan-precio {
  margin: 0; font-size: 25px; font-weight: 780;
  color: var(--txt-titulo); letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
#home-saas .pos-plan-precio small { font-size: 12.5px; font-weight: 500; color: var(--vtx3); margin-left: 5px; letter-spacing: 0; }
#home-saas .pos-plan-usuarios {
  margin: 0 0 10px; display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--vtx3);
}
#home-saas .pos-plan-usuarios i { color: var(--va); font-size: 15px; }
#home-saas .pos-plan .pos-btn { margin-top: auto; width: 100%; padding: 10px 16px; font-size: 14px; }

/* Ocho frases cortas en una fila que se acomoda sola. En lista de dos
   columnas ocupaban media pantalla de alto para decir lo mismo que acá
   se lee de una pasada. */
#home-saas .pos-incluye {
  margin-top: 16px;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 8px;
}
#home-saas .pos-incluye-titulo {
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--vtx3);
  margin-right: 4px;
}
#home-saas .pos-ficha {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--pos-borde);
  border-radius: 999px;
  background: var(--pos-carta);
  padding: 7px 13px;
  font-size: 13px; color: var(--vtx2);
}
#home-saas .pos-ficha i { color: var(--pos-frio); font-size: 13px; }

/* ══════════════════════════════════════════════════════════════
   PREGUNTAS
   ══════════════════════════════════════════════════════════════ */
#home-saas .pos-acordeon {
  max-width: 780px; margin: 0 auto;
  border: 1px solid var(--pos-borde);
  border-radius: var(--pos-radio);
  overflow: hidden;
}
#home-saas .pos-pregunta { border-bottom: 1px solid var(--pos-borde); background: var(--pos-carta); }
#home-saas .pos-pregunta:last-child { border-bottom: 0; }
#home-saas .pos-pregunta summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 17px 20px;
  cursor: pointer;
  font-size: 15.5px; font-weight: 620; color: var(--vtx);
  list-style: none;
  transition: color 0.15s var(--ease-apple), background 0.15s var(--ease-apple);
}
#home-saas .pos-pregunta summary::-webkit-details-marker { display: none; }
#home-saas .pos-pregunta summary:hover { background: rgba(255,255,255,0.025); }
#home-saas .pos-pregunta summary:focus-visible { outline: 2px solid var(--va); outline-offset: -2px; }
#home-saas .pos-pregunta summary i {
  flex-shrink: 0; color: var(--vtx3); font-size: 17px;
  transition: transform 0.2s var(--ease-apple), color 0.2s var(--ease-apple);
}
#home-saas .pos-pregunta[open] summary { color: var(--va); }
#home-saas .pos-pregunta[open] summary i { transform: rotate(180deg); color: var(--va); }
#home-saas .pos-respuesta { padding: 0 20px 18px; }
#home-saas .pos-respuesta p { margin: 0; font-size: 14.5px; line-height: 1.68; color: var(--vtx3); max-width: 66ch; }

/* ══════════════════════════════════════════════════════════════
   CONTACTO
   ══════════════════════════════════════════════════════════════ */
#home-saas .pos-contacto-caja {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 54px);
  align-items: start;
  border: 1px solid var(--pos-borde);
  border-radius: calc(var(--pos-radio) + 6px);
  background: linear-gradient(150deg, rgba(206,147,216,0.07), rgba(255,255,255,0.015) 58%);
  padding: clamp(24px, 3.6vw, 42px);
}
#home-saas .pos-contacto-caja .pos-h2,
#home-saas .pos-contacto-caja .pos-sub { text-align: left; margin-left: 0; }
#home-saas .pos-contacto-caja .pos-sub { margin-bottom: 16px; }
#home-saas .pos-contacto-directo { margin: 0; font-size: 13.5px; color: var(--vtx3); }
#home-saas .pos-contacto-directo a { color: var(--va); }

#home-saas .pos-form { display: grid; gap: 13px; }
#home-saas .pos-campo { display: flex; flex-direction: column; gap: 6px; }
#home-saas .pos-campo label { font-size: 12.5px; font-weight: 600; color: var(--vtx3); }
#home-saas .pos-opcional { font-weight: 400; opacity: 0.7; }
#home-saas .pos-campo input,
#home-saas .pos-campo textarea {
  font-family: inherit; font-size: 14.5px;
  color: var(--vtx);
  background: var(--color-bg-campo);
  border: 1px solid var(--color-border-campo);
  border-radius: 10px;
  padding: 11px 13px;
  width: 100%;
  transition: border-color 0.15s var(--ease-apple), box-shadow 0.15s var(--ease-apple);
}
#home-saas .pos-campo textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
#home-saas .pos-campo input:focus,
#home-saas .pos-campo textarea:focus {
  outline: none;
  border-color: var(--color-border-campo-foco);
  box-shadow: 0 0 0 3px rgba(206,147,216,0.13);
}
/* El campo trampa: fuera de la vista, pero no con display:none — hay
   robots que se saltan lo que está oculto así. Ver enviarConsultaPublica. */
#home-saas .pos-trampa {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
#home-saas .pos-form .pos-btn { justify-self: start; margin-top: 3px; }
#home-saas .pos-form-aviso { margin: 0; font-size: 13.5px; min-height: 1.2em; }
#home-saas .pos-form-ok    { color: var(--color-verde); }
#home-saas .pos-form-error { color: var(--color-rojo-suave); }

/* ══════════════════════════════════════════════════════════════
   CIERRE
   ══════════════════════════════════════════════════════════════ */
#home-saas .pos-cierre {
  text-align: center;
  padding-bottom: clamp(44px, 5vw, 68px);
}
#home-saas .pos-cierre .pos-sub { margin-bottom: 28px; }

/* ══════════════════════════════════════════════════════════════
   PANTALLAS ANGOSTAS
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  #home-saas .pos-panel,
  #home-saas .pos-contacto-caja { grid-template-columns: minmax(0, 1fr); }
  /* El dibujo primero: en un teléfono, ver de qué se trata antes de
     leerlo es lo que hace que alguien siga bajando. */
  #home-saas .pos-panel-dibujo { order: -1; }
    }
@media (max-width: 760px) {
  #home-saas .pos-promesas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  #home-saas .pos-pestana { padding: 9px 13px; font-size: 13px; }
  #home-saas .pos-form .pos-btn { justify-self: stretch; }
}

/* Quien pidió que nada se mueva, que nada se mueva. */
@media (prefers-reduced-motion: reduce) {
  #home-saas * { transition: none !important; animation: none !important; }
  #home-saas .pos-btn:hover, #home-saas .pos-plan:hover { transform: none; }
}

/* El comprobante junto al titular. Apenas inclinado y levantado: lo
   justo para que se lea como un objeto sobre la página y no como una
   figura pegada al costado. */
/* La captura junto al titular, apenas inclinada: lo justo para que se
   lea como una pantalla puesta sobre la página y no como una figura
   pegada al costado. */
#home-saas .pos-hero-aside { transform: rotate(1.4deg); }
#home-saas .pos-hero-aside .pos-ventana { box-shadow: 0 30px 70px rgba(0,0,0,0.62); }

/* ══════════════════════════════════════════════════════════════
   EL BOTÓN DE CONTACTO Y SU PANEL
   ══════════════════════════════════════════════════════════════
   Acompaña todo el scroll, porque la duda aparece en cualquier
   momento y casi nunca al final. */
#home-saas .pos-flotante {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 19px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: linear-gradient(180deg, #b769c7, var(--color-accent-dark));
  color: #fff; font: inherit; font-size: 14.5px; font-weight: 650;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,0.44), 0 0 0 1px rgba(255,255,255,0.06) inset;
  transition: transform 0.16s var(--ease-apple), box-shadow 0.16s var(--ease-apple);
}
#home-saas .pos-flotante i { font-size: 17px; }
#home-saas .pos-flotante:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,0.5); }
#home-saas .pos-flotante:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

#home-saas .pos-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
#home-saas .pos-modal[hidden] { display: none; }
#home-saas .pos-modal-fondo { position: absolute; inset: 0; background: rgba(0,0,0,0.62); backdrop-filter: blur(3px); }
#home-saas .pos-modal-caja {
  position: relative;
  width: min(480px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  border: 1px solid var(--pos-borde2);
  border-radius: calc(var(--pos-radio) + 4px);
  background: linear-gradient(165deg, #201b24, #161616 62%);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  padding: clamp(22px, 3.4vw, 32px);
}
#home-saas .pos-modal-caja .pos-h2 { text-align: left; font-size: clamp(21px, 3vw, 27px); }
#home-saas .pos-modal-caja .pos-sub { text-align: left; margin: 0 0 20px; max-width: none; }
#home-saas .pos-modal-cerrar {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid var(--pos-borde); background: rgba(255,255,255,0.04);
  color: var(--vtx3); font-size: 17px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#home-saas .pos-modal-cerrar:hover { color: var(--vtx); border-color: var(--pos-borde2); }
#home-saas .pos-contacto-directo { margin: 2px 0 0; font-size: 13px; color: var(--vtx3); }
#home-saas .pos-contacto-directo a { color: var(--va); }
body.pos-con-modal { overflow: hidden; }

@media (max-width: 900px) {
  /* En angosto el hero vuelve a una columna, con el comprobante abajo:
     al lado no cabe sin achicar el titular. */
  #home-saas .pos-hero { grid-template-columns: minmax(0, 1fr); text-align: center; }
  #home-saas .pos-botones { justify-content: center; }
  #home-saas .pos-bajada { margin-left: auto; margin-right: auto; }
  #home-saas .pos-hero-aside { transform: none; margin-top: 30px; }
  #home-saas .pos-hero-foto img { object-position: 62% 30%; }
}
@media (max-width: 560px) {
  /* El botón flotante se queda solo con el ícono: con texto se come el
     ancho de una pantalla de teléfono. */
  #home-saas .pos-flotante { padding: 14px; right: 14px; bottom: 14px; }
  #home-saas .pos-flotante span { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   LA COMPARACIÓN
   ══════════════════════════════════════════════════════════════
   Tres columnas: la tarea, cómo se hace hoy y cómo se haría. La del
   medio va apagada y la de la derecha encendida — la diferencia de
   color hace la mitad del trabajo antes de que alguien lea. */
#home-saas .pos-tabla {
  border: 1px solid var(--pos-borde);
  border-radius: var(--pos-radio);
  overflow: hidden;
}
#home-saas .pos-tabla-cab,
#home-saas .pos-tabla-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: 18px;
  padding: 14px 20px;
  align-items: center;
}
#home-saas .pos-tabla-cab {
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--pos-borde);
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--vtx3);
}
#home-saas .pos-col-ahora { color: var(--va); }
#home-saas .pos-tabla-fila { border-bottom: 1px solid var(--pos-borde); font-size: 14.5px; }
#home-saas .pos-tabla-fila:last-child { border-bottom: 0; }
#home-saas .pos-tarea { color: var(--vtx); font-weight: 600; }
#home-saas .pos-antes { color: var(--txt-tenue, var(--vtx3)); }
#home-saas .pos-ahora { color: var(--vtx2); }
#home-saas .pos-antes i, #home-saas .pos-ahora i {
  font-size: 15px; margin-right: 8px; vertical-align: -2px;
}
#home-saas .pos-antes i { color: var(--color-rojo-suave); opacity: 0.65; }
#home-saas .pos-ahora i { color: var(--pos-frio); }

/* ══════════════════════════════════════════════════════════════
   LOS TRES PASOS
   ══════════════════════════════════════════════════════════════ */
#home-saas .pos-pasos-lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  counter-reset: paso;
}
#home-saas .pos-paso-caja {
  position: relative;
  border: 1px solid var(--pos-borde);
  border-radius: var(--pos-radio);
  background: var(--pos-carta);
  padding: 20px 18px 18px;
}
#home-saas .pos-paso-n {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-bottom: 14px;
  border-radius: 10px;
  background: rgba(206,147,216,0.14);
  border: 1px solid rgba(206,147,216,0.32);
  color: var(--va); font-size: 16px; font-weight: 750;
}
#home-saas .pos-paso-caja h3 { margin: 0 0 8px; font-size: 17px; font-weight: 680; color: var(--vtx); }
#home-saas .pos-paso-caja p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--vtx3); }

/* ══════════════════════════════════════════════════════════════
   EL PIE
   ══════════════════════════════════════════════════════════════ */
#home-saas .pos-pie {
  position: relative;
  isolation: isolate;
  margin-top: var(--pos-aire);
  border-top: 1px solid var(--pos-borde);
}
/* La misma clase de foto que abre la página, cerrándola. Va más apagada
   que la del hero: acá abajo lo que tiene que leerse es un RUT y una
   dirección, no un titular. */
#home-saas .pos-pie-foto { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
#home-saas .pos-pie-foto img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
  filter: saturate(0.5) brightness(0.42);
}
#home-saas .pos-pie-foto::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--vb) 4%, rgba(20,20,20,0.84) 36%, rgba(20,20,20,0.9)),
    linear-gradient(90deg, rgba(20,20,20,0.55), transparent 48%, rgba(20,20,20,0.45));
}

#home-saas .pos-pie-dentro {
  max-width: var(--pos-ancho);
  margin: 0 auto;
  padding: 34px 20px 26px;
  display: grid; gap: 32px;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
}
#home-saas .pos-pie-marca .vit-logo { font-size: 21px; cursor: default; }
#home-saas .pos-pie-marca p { margin: 10px 0 0; font-size: 13.5px; color: var(--vtx3); max-width: 25ch; }
#home-saas .pos-pie-col h4 {
  margin: 0 0 12px; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--vtx3);
}
#home-saas .pos-pie-col p { margin: 0 0 7px; font-size: 13.5px; line-height: 1.65; color: var(--vtx2); }
#home-saas .pos-pie-col a { color: var(--va); }
#home-saas .pos-pie-abajo {
  border-top: 1px solid var(--pos-borde);
  padding: 18px 20px;
  text-align: center;
  font-size: 12.5px;
  color: var(--txt-tenue, var(--vtx3));
}

@media (max-width: 820px) {
  /* La tabla en angosto deja de ser tabla: cada tarea es una tarjeta
     con sus dos formas una debajo de la otra. Tres columnas en un
     teléfono no se leen, se adivinan. */
  #home-saas .pos-tabla-cab { display: none; }
  #home-saas .pos-tabla-fila {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 16px 18px;
  }
  #home-saas .pos-tarea { font-size: 15px; margin-bottom: 2px; }
  #home-saas .pos-pie-dentro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
}
@media (max-width: 520px) {
  #home-saas .pos-pie-dentro { grid-template-columns: minmax(0, 1fr); }
}

/* ══════════════════════════════════════════════════════════════
   LA VENTANA DE NAVEGADOR DIBUJADA
   ══════════════════════════════════════════════════════════════
   Envuelve las capturas del programa. Que se vea el marco es el punto:
   una imagen suelta de una interfaz se lee como un dibujo, y dentro de
   una ventana se lee como algo que alguien está usando. */
#home-saas .pos-ventana {
  margin: 0;
  border: 1px solid var(--pos-borde2);
  border-radius: 12px;
  overflow: hidden;
  background: #101010;
  box-shadow: 0 22px 54px rgba(0,0,0,0.5);
}
#home-saas .pos-ventana-barra {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  background: linear-gradient(180deg, #232323, #1b1b1b);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
#home-saas .pos-ventana-puntos { display: flex; gap: 6px; flex-shrink: 0; }
#home-saas .pos-ventana-puntos i {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,0.16);
}
#home-saas .pos-ventana-url {
  flex: 1;
  background: rgba(0,0,0,0.34);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11.5px;
  color: var(--vtx3);
  text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#home-saas .pos-ventana img { display: block; width: 100%; height: auto; }

/* En el panel del vistazo la captura manda: se le da más ancho que al
   texto, al revés que con los dibujos, porque una pantalla de programa
   necesita tamaño para que se entienda qué se está mirando. */
@media (min-width: 861px) {
  #home-saas .pos-panel:has(.pos-ventana) {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  }
}