/* ================================================================
   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; }
/* Y mientras todavía no se sabe si hay sesión, cuando el almacén local
   dice que probablemente sí (ver el script del <head> en la página). La
   portada ahora viene escrita en el HTML y se pintaría de entrada; a
   quien ya está adentro le aparecería un instante antes de que el
   programa tome la pantalla. La clase se quita sola en cuanto se sabe. */
html.fx-sesion-probable #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; }

/* La paleta de las superficies del producto. Va en su propio bloque y
   con los dos selectores porque el alta de talleres usa las mismas
   tarjetas que la portada: son la misma página para quien las mira, y
   dos copias de estos cinco valores se separan solas con el tiempo.
   Lo que NO se comparte es el layout del bloque de acá abajo —el
   overflow y el position—, que es propio de la portada. */
/* #me-planes-elegir es la lista de planes de Mi Empresa › Tu plan. Vive
   lejos de acá, pero muestra las mismas tarjetas y por eso necesita los
   mismos valores: repetir el celeste a mano en admin.css es justo la
   copia que este bloque existe para evitar. */
#home-saas,
#vitp-registro-empresa,
#me-planes-elegir {
  --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;
}

#home-saas {
  /* El aire entre secciones. Estuvo en clamp(64,9vw,116) y se bajó a
     clamp(44,5.5,76) porque con ocho secciones la página quedaba
     larguísima: cada 40px de más entre ellas son 320px de scroll.

     Ahora sube de nuevo, a la mitad del camino entre esos dos valores.
     El motivo es que la página tiene menos secciones que entonces —el
     vistazo dejó de ser un recorrido con pestañas y se juntó con la
     comparación—, así que lo que sobraba de largo ya no sobra, y con
     44px arriba una sección se leía pegada a la anterior en vez de
     empezar. El aire entre secciones no es decoración: es lo que dice
     "esto que sigue es otra cosa". */
  --pos-aire:   clamp(64px, 8vw, 112px);
  /* 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);

  /* 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 necesita todo el ancho, así
     que el contenedor no lo corta. */
  overflow-x: clip;
  /* Para que la capa de fondo (.pos-fondo, más abajo) se mida contra la
     página entera y no contra lo primero que encuentre más arriba. */
  position: relative;
  /* Y para que su z-index negativo se resuelva ACÁ ADENTRO. Sin esto la
     capa se iba al fondo de todo y quedaba tapada por el fondo opaco de
     #vitrina-root, que es un antepasado: la foto estaba cargada, del
     tamaño correcto y con opacidad 1, y aun así no se veía. Con la
     página aislada, "detrás de todo" pasa a significar detrás del
     contenido de esta página y no detrás del programa entero. */
  isolation: isolate;
}

#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;
  /* Un 20% menos que el tamaño con el que nació (34/6.2vw/62). El
     titular creció de tres palabras a doce y a ese cuerpo se comía la
     pantalla: hay que leerlo, no esquivarlo. Los tres números bajan
     juntos para que se achique igual en un teléfono y en un monitor. */
  font-size: var(--letra-portada);
  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. */
/* Y nunca se parte: "tu servicio técnico" es una sola cosa. Sin esto,
   en el ancho justo donde el hero pasa a dos columnas, la línea se
   cortaba sola y dejaba un "tu" solo en medio del titular. */
#home-saas .pos-h1 em {
  font-style: normal; font-weight: inherit; color: inherit;
  display: block; white-space: nowrap;
}
#home-saas .pos-h2 {
  margin: 0 0 34px;
  font-size: var(--letra-seccion);
  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; }

/* Acá vivía .pos-respuesta, la línea entre la pregunta y la bajada.
   Esa línea se mudó a titular la sección de los seis recuadros, así que
   la regla se va con ella — y menos mal, porque el nombre ya estaba
   tomado: .pos-respuesta es, desde antes, la respuesta de cada pregunta
   frecuente (más abajo en este archivo). Mientras las dos convivieron,
   las respuestas del acordeón heredaron de acá el centrado y el ancho
   máximo sin que nadie lo pidiera. */
#home-saas .pos-sub {
  max-width: 600px;
  margin: 0 auto 34px;
  text-align: center;
  font-size: var(--letra-texto);
  line-height: 1.6;
  color: var(--vtx3);
  text-wrap: balance;
}

/* ══════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════ */
#home-saas .pos-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  /* La captura se lleva MÁS ancho que el texto. Antes era al revés
     (1.05 / 0.85), cuando el titular era grande y abajo iba la caja de
     las cuatro promesas. Sacadas las dos cosas, la columna de la
     izquierda pide menos y la pantalla del programa —que es la prueba
     de que esto existe— puede verse de verdad. */
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
  text-align: left;
  max-width: var(--pos-ancho);
  margin: 0 auto;
  /* Arriba, el alto de la barra de secciones que flota encima más el
     aire de siempre: si no, la marca "FixHub" queda debajo de ella. */
  padding: calc(var(--pos-barra-alto, 70px) + clamp(22px, 3vw, 44px))
           20px clamp(28px, 4vw, 48px);
}

/* ── Las fotos del fondo ───────────────────────────────────────
   Una capa FIJA detrás de toda la página, con las fotos apiladas una
   sobre otra: al bajar no se mueve, se cambia de foto. Esa quietud es
   lo que la deja ser fondo — una foto que se desplaza con el contenido
   arrastra el ojo y compite con lo que hay que leer.

   Van muy apagadas a propósito. Una foto a plena luz detrás de un
   titular obliga a ponerle sombra al texto, y ahí empieza a verse como
   un volante. Con brillo bajo, saturación baja y el velo de encima, la
   foto da ambiente y el texto no tiene que pelear con ella.

   Quieto se consigue con position:sticky y no con position:fixed. Lo
   fijo se mide contra la pantalla SALVO que algún antepasado le arme un
   marco propio, y #home-saas recorta lo que se sale de su ancho
   (overflow-x:clip, ahí arriba) — con eso, una capa fija adentro
   terminaba midiendo el ancho del contenido, no el de la pantalla. La
   capa mide toda la página, y adentro una caja de una pantalla de alto
   se pega arriba: el efecto es el mismo y no depende de qué recorte
   tenga el contenedor.

   Como #home-saas no se pinta ningún fondo propio, un z-index negativo
   acá la deja por detrás de todo el contenido sin taparle nada. */
#home-saas .pos-fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
#home-saas .pos-fondo-pegado {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  /* El recorte va acá y no en la capa: una capa con overflow propio
     deja de ser "la página" para la caja pegajosa y esta se quedaría
     clavada arriba de todo. */
  overflow: hidden;
}
#home-saas .pos-fondo-foto {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* El object-position se lo pone cada foto desde su línea de FONDOS
     (portada-pos.js): dónde está lo que vale la pena ver depende de la
     foto, no de la página. */
  filter: saturate(0.62) brightness(0.78) contrast(1.04);
  /* Todas apagadas menos la que toca. El cruce es lento a propósito:
     el fondo tiene que cambiar sin que uno lo note cambiar, si no
     parpadea justo mientras se lee. */
  opacity: 0;
  transition: opacity 1.1s var(--ease-apple);
}
#home-saas .pos-fondo-foto.activa { opacity: 1; }
/* Si alguien pidió menos movimiento en su sistema, el cruce se apaga:
   la foto cambia de una y listo. */
@media (prefers-reduced-motion: reduce) {
  #home-saas .pos-fondo-foto { transition: none; }
}
/* El velo. Es lo que hace que la página siga siendo legible sobre
   cualquier foto, incluso una clara que se ponga mañana: sin esto el
   fondo manda y el texto queda a merced de la imagen que toque.

   El morado arriba es el mismo tinte de marca que tenía el hero, y el
   negro de abajo funde la foto con el pie de la página. */
#home-saas .pos-fondo-velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(20,20,20,0.80) 16%, rgba(20,20,20,0.64) 46%, rgba(20,20,20,0.44) 78%, rgba(20,20,20,0.56)),
    linear-gradient(180deg, rgba(106,27,154,0.16), transparent 42%),
    linear-gradient(0deg, var(--vb), transparent 30%);
}

/* Acá vivía .pos-hero-luz, el halo de atrás del titular: un óvalo de
   1500px con un degradado lila y uno cian, corrido al 28% del ancho.
   La idea era dar profundidad, pero en pantalla ancha el centro del
   óvalo quedaba al costado del texto y no detrás, así que se leía como
   una mancha morada con borde propio. El degradado morado de .pos-hero
   y el velo de la foto ya hacen ese trabajo. */
#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: 20px;
}
/* La marca va grande, arriba del titular: es lo primero que se lee y
   tiene que sonar como el nombre del producto, no como una etiqueta.
   Crece con el ancho igual que el titular, pero más despacio, para que
   no lleguen a competir en la pantalla grande. */
#home-saas .pos-hero-marca .vit-logo {
  font-size: var(--letra-marca);
  line-height: 1;
  cursor: default;
}
#home-saas .pos-bajada {
  max-width: 560px;
  margin: 0 0 34px;
  font-size: var(--letra-bajada);
  line-height: 1.62;
  color: var(--vtx3);
  text-wrap: balance;
}

/* ── Botones ──────────────────────────────────────────────────── */
/* Los botones valen también adentro de #vitp-programa, la página larga
   que explica el programa (ver origen/pagina.html): es la misma portada
   continuada, así que sus dos botones del final tienen que ser los
   mismos y no unos parecidos.

   Va con :is() y no con dos reglas sueltas para que el peso no cambie:
   los dos son id, así que la regla pesa exactamente lo que pesaba. */
#home-saas .pos-botones {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start;
}
:is(#home-saas, #vitp-programa) .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: var(--letra-texto); 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);
}
/* Los dos botones grandes que llevan al alta de talleres son <a> y no
   <button>: un robot sigue enlaces, no aprieta botones (ver
   _posIrARegistroEmpresa en portada-pos.js). Un <a> trae subrayado de
   fábrica, así que se lo saca acá — el color ya lo ponen las variantes,
   así que el botón se ve exactamente igual que antes. */
:is(#home-saas, #vitp-programa) .pos-btn { text-decoration: none; }
:is(#home-saas, #vitp-programa) .pos-btn i { font-size: var(--icono-texto); }
:is(#home-saas, #vitp-programa) .pos-btn:hover { transform: translateY(-1.5px); }
:is(#home-saas, #vitp-programa) .pos-btn:active { transform: translateY(0); }
:is(#home-saas, #vitp-programa) .pos-btn:focus-visible { outline: 2px solid var(--va); outline-offset: 3px; }

:is(#home-saas, #vitp-programa) .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);
}
:is(#home-saas, #vitp-programa) .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); }

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

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

:is(#home-saas, #vitp-programa) .pos-btn-grande { padding: 16px 30px; }

#home-saas .pos-hero-nota {
  margin: 18px 0 0; font-size: var(--letra-menor); color: var(--txt-tenue, var(--vtx3));
}
#home-saas .pos-enlace,
#vitp-registro-empresa .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,
#vitp-registro-empresa .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. */
/* ══════════════════════════════════════════════════════════════
   LOS TRES PASOS — pestañas y panel
   ══════════════════════════════════════════════════════════════
   Tres momentos de un día de taller, uno a la vez. Estas pestañas
   estuvieron en la sección que abre con una pregunta y ahí no iban
   —debajo de una pregunta va una respuesta, no un menú para elegir cuál
   leer—; debajo de "así de fácil empezar" van pasos, y un paso a la vez
   es exactamente lo que unas pestañas hacen. */
#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: var(--letra-menor); 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: var(--icono-texto); }
#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[hidden] { display: none; }
/* El mismo vidrio esmerilado del formulario de /registro-empresa
   (.admin-form en este archivo): fondo --pos-carta y el desenfoque de
   atrás. Tenía un degradado de blanco a secas, que sobre la foto del
   fondo se leía como una capa de pintura y no como vidrio — el panel
   flotaba sin que se notara que hay algo detrás.

   El blur y las dos luces interiores salen de las variables de
   .fx-vidrio (utilidades.css), no de números propios: es la misma
   superficie que la barra de secciones y el botón de dudas, y tres
   vidrios distintos en la misma página se notan. */
#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: var(--pos-carta);
  backdrop-filter: blur(var(--fx-vidrio-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--fx-vidrio-blur)) saturate(180%);
  box-shadow:
    inset 0 1px 0 var(--fx-vidrio-luz),
    inset 0 -1px 0 var(--fx-vidrio-sombra);
  padding: clamp(22px, 3.4vw, 40px);
}
/* El panel de los tres pasos: la captura a la izquierda y, a la
   derecha, lo que viene con el programa.

   La captura se lleva el 60% y no la mitad. Lo que tiene al lado son
   cuatro líneas cortas que se leen de un vistazo y no necesitan más
   ancho del que ocupan; lo que sí necesita todo el que se le pueda dar
   es la pantalla del programa, que es lo único que muestra cómo se ve
   trabajar en él. Acá va a ir un video, además, y un video chico no se
   mira.

   El aire entre las dos columnas también se aprieta: el del panel con
   texto (hasta 52px) separa dos bloques de lectura, y acá basta con que
   se note que son dos cosas. */
#home-saas .pos-panel-pasos {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  align-items: center;
}
#home-saas .pos-puntos-ventajas {
  gap: 18px;
}

#home-saas .pos-panel-texto h3 {
  margin: 0 0 12px;
  font-size: var(--letra-destacada);
  font-weight: 700; letter-spacing: -0.02em;
  color: var(--txt-titulo);
}
/* La misma escala que el resto del texto de la página (ver .pos-sub y
   .pos-lado li): todo lo que se lee de corrido mide igual. Estaba en
   15px fijos porque esta parte vino de vuelta del código viejo y no
   había pasado por el ajuste. */
#home-saas .pos-panel-texto p {
  margin: 0 0 18px;
  font-size: var(--letra-texto);
  line-height: 1.6;
  color: var(--vtx3);
}
/* Los tres puntos con visto bueno debajo del párrafo. Vuelven con el
   panel: son lo que convierte una promesa en una lista de cosas que se
   pueden comprobar. */
#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: var(--letra-texto);
  line-height: 1.5;
  color: var(--vtx2);
}
#home-saas .pos-puntos i {
  color: var(--pos-frio); font-size: var(--icono-texto); flex-shrink: 0; margin-top: 1px;
}

/* ══════════════════════════════════════════════════════════════
   PRECIOS
   ══════════════════════════════════════════════════════════════ */
#home-saas .pos-planes {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 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);
  /* El mismo vidrio esmerilado que el resto de las cajas de la portada
     y que las tarjetas de plan del alta (.reg-plan). Eran las últimas
     que quedaban con el fondo plano, y al lado de las otras se leían
     como pegadas encima de la foto en vez de apoyadas sobre ella. */
  background: var(--pos-carta);
  backdrop-filter: blur(var(--fx-vidrio-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--fx-vidrio-blur)) saturate(180%);
  box-shadow:
    inset 0 1px 0 var(--fx-vidrio-luz),
    inset 0 -1px 0 var(--fx-vidrio-sombra);
  padding: 19px 16px 16px;
  transition: border-color 0.18s var(--ease-apple), transform 0.18s var(--ease-apple);
}
#home-saas .pos-plan { cursor: pointer; }
#home-saas .pos-plan:hover { border-color: var(--pos-borde2); transform: translateY(-2px); }
/* El foco del teclado se ve en la tarjeta entera, no en un borde de un
   píxel: es una opción de un grupo, y hay que poder saber en cuál se
   está parado antes de apretar espacio. */
#home-saas .pos-plan:focus-visible { outline: 2px solid var(--va); outline-offset: 3px; }
/* El elegido conserva el desenfoque: solo le cambia el baño de color.
   El degradado va encima del fondo de vidrio, no en su lugar — si se
   reemplaza el background a secas, el backdrop-filter sigue puesto pero
   el lila tapa lo que se veía a través y la tarjeta elegida queda
   opaca al lado de las otras tres. */
#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)),
    var(--pos-carta);
  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: var(--letra-guia); 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);
}
/* El nombre del plan baja un peldaño y se queda en el de texto. Va en
   mayúsculas y en negrita, así que a 20px competía con el precio, que es
   lo que la persona vino a mirar. No lleva medida propia: si hace falta
   moverlo, se mueve de peldaño, no de tres píxeles. */
#home-saas .pos-plan h3 { margin: 0; font-size: var(--letra-texto); font-weight: 650; color: var(--vtx); }
#home-saas .pos-plan-precio {
  margin: 0; font-size: var(--letra-destacada); font-weight: 780;
  color: var(--txt-titulo); letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
#home-saas .pos-plan-precio small { font-size: var(--letra-texto); font-weight: 500; color: var(--vtx3); margin-left: 5px; letter-spacing: 0; }
/* La promoción anual, debajo del precio mensual. Va en el celeste de la
   página y no en morado: el morado acá es del plan recomendado, y dos
   cosas del mismo color compitiendo en la misma tarjeta hacen que no se
   entienda cuál es la que llama. */
#home-saas .pos-plan-anual {
  margin: 4px 0 0;
  font-size: var(--letra-texto);
  color: var(--vtx3);
  font-variant-numeric: tabular-nums;
  /* Dos renglones siempre, quepa o no en uno. En pantallas angostas
     "$59.900 al año $71.880" se parte en dos y el de al lado no: las
     tarjetas quedaban corridas de ahí para abajo, y cuánto dependía del
     ancho de la ventana. Reservando el alto, las cuatro filas calzan a
     cualquier ancho. */
  min-height: 2.4em;
}
#home-saas .pos-plan-anual strong {
  color: var(--pos-frio);
  font-weight: 700;
}
/* Los doce meses sueltos, tachados. Apagados a propósito: están para
   que el número de al lado se entienda, no para leerse. */
#home-saas .pos-plan-anual s {
  color: var(--txt-tenue, var(--vtx3));
  opacity: 0.6;
  margin-left: 4px;
  /* En bloque cuando no cabe al lado: el precio del año y su tachado no
     tienen por qué ir en la misma línea, y exigir que quepan los dos
     obligaba a la tarjeta a ser 50px más ancha de lo que necesita. Así
     la columna puede ser más angosta y caben más planes de lado a lado. */
  display: inline-block;
}
#home-saas .pos-plan-usuarios {
  margin: 10px 0; display: flex; align-items: center; gap: 7px;
  font-size: var(--letra-texto); color: var(--vtx3);
}
#home-saas .pos-plan-usuarios i { color: var(--va); font-size: var(--icono-texto); }
#home-saas .pos-plan .pos-btn { margin-top: auto; width: 100%; padding: 11px 16px; }
/* El renglón del precio anual cuando el plan no tiene: ocupa su lugar y
   no se ve. Es lo que mantiene las cuatro tarjetas alineadas fila por
   fila (ver el comentario en portada-pos.js). */
#home-saas .pos-plan-anual-hueco { visibility: hidden; }


/* ══════════════════════════════════════════════════════════════
   PREGUNTAS
   ══════════════════════════════════════════════════════════════ */
/* El mismo vidrio que el panel de "Cómo funciona" y que el formulario
   del alta. Va en la caja entera y no en cada <details>: un
   backdrop-filter por renglón desenfoca ocho veces lo mismo, y en el
   borde entre dos renglones se nota el corte. El renglón se queda con
   su --pos-carta, que sobre el vidrio es el lavado que lo separa del
   de al lado. */
#home-saas .pos-acordeon {
  max-width: 780px; margin: 0 auto;
  border: 1px solid var(--pos-borde);
  border-radius: var(--pos-radio);
  overflow: hidden;
  backdrop-filter: blur(var(--fx-vidrio-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--fx-vidrio-blur)) saturate(180%);
  box-shadow:
    inset 0 1px 0 var(--fx-vidrio-luz),
    inset 0 -1px 0 var(--fx-vidrio-sombra);
}
#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: var(--letra-texto); 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: var(--icono-texto);
  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: var(--letra-texto); 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; }
/* El formulario de contacto ya no vive acá: es la página /contacto
   (ver #vitp-contacto en origen/pagina.html), con las clases de
   formulario del programa. Se fueron con él las reglas del panel
   flotante y de sus campos. */

/* ══════════════════════════════════════════════════════════════
   CIERRE
   ══════════════════════════════════════════════════════════════ */
/* El aire de arriba, más corto que el de una sección cualquiera: el
   cierre y "Dónde estamos" —que viene justo antes— se leen como el
   final de la página, no como dos temas distintos. Con el aire normal
   de sección sumado al relleno de abajo quedaban casi 180px entre
   los dos, una pantalla de nada en el medio. */
/* Y sin relleno abajo, por lo mismo: el pie ya trae su propio
   margin-top de --pos-aire. Los dos juntos daban 180px entre el botón y
   la línea del pie. */
#home-saas .pos-cierre {
  text-align: center;
  padding-top: clamp(44px, 5.5vw, 76px);
  padding-bottom: 0;
}
#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: 560px) {
  #home-saas .pos-pestana { padding: 9px 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) {
  /* La pastilla de la barra salta directo al enlace activo en vez de
     viajar: la regla de abajo le quita la transición como a todo lo
     demás, y el resultado sigue siendo correcto porque la posición se
     calcula igual, solo que sin recorrido. */
  #home-saas * { transition: none !important; animation: none !important; }
  :is(#home-saas, #vitp-programa) .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. */
/* Derecha, sin inclinación. La tenía (1.4 grados) para que se leyera
   como un objeto apoyado y no como una imagen pegada, pero con el
   titular más chico y sin la caja de promesas debajo, el hero quedó
   apoyado en esta captura: lo torcido dejó de ser un guiño y pasó a
   verse como que algo se descuadró. */
#home-saas .pos-hero-aside {
  transform: none;
  /* El marco contra el que se mide el teléfono, que va apoyado en la
     esquina de la ventana. */
  position: relative;
  /* Y el contenedor contra el que se miden el marco y las esquinas DEL
     teléfono. No puede medirse contra sí mismo —un elemento nunca es su
     propio contenedor— y sin este, sus cqw se iban a medir contra la
     ventana del navegador: un teléfono de 189px terminaba con 27px de
     marco y esquinas de 170. */
  container-type: inline-size;
}
/* ── El cuerpo del portátil ─────────────────────────────────────
   La tapa que enmarca la ventana y la base que sobresale por los lados.
   Dibujado, igual que el teléfono: una foto de un computador con la
   captura encima pesa cientos de kilos, se ve borrosa en una pantalla
   buena y envejece cuando sale el modelo nuevo.

   La sombra grande pasa a vivir acá y se le saca a la ventana: el que
   está apoyado sobre la página es el aparato, no la pantalla. */
/* Todo lo que sigue se mide en cqw: porcentajes del ancho de ESTE
   aparato, no píxeles fijos.

   El motivo se ve cuando la ventana se achica. La captura de adentro
   encoge con el computador, pero el marco, la barra de la dirección y
   la base estaban en píxeles y no encogían: en un computador de 700px
   la barra es una franja fina y correcta, y en uno de 300 se comía un
   tercio de la pantalla. El aparato se deformaba solo con mover el
   borde de la ventana.

   Los números salen de dividir los píxeles que tenía por el ancho al
   que estaban bien (unos 730px), así que en grande se ve exactamente
   igual que antes y en chico encoge todo junto. */
#home-saas .pos-portatil {
  position: relative;
  container-type: inline-size;
  /* El 6% de cada lado es para la base, que es más ancha que la tapa
     igual que en un portátil de verdad (112% con -6% de sangría). Sin
     este margen la base sobresalía del hueco, y en una ventana angosta
     —donde el hero pasa a una sola columna y el dibujo se lleva el
     ancho entero— llegaba al borde de la pantalla y quedaba cortada.
     Como cqw mide la caja de contenido, el dibujo entero encoge junto
     con el margen y las proporciones no se mueven. */
  padding: 0 6%;
}
#home-saas .pos-portatil-tapa {
  position: relative;
  /* El marco. Arriba es más ancho que a los lados porque ahí va la
     cámara, y abajo más todavía: así es un portátil de verdad, y
     parejo por los cuatro lados se ve como un recuadro y no como una
     tapa.

     Los lados delgados son los que hacen que se vea moderno; un marco
     grueso alrededor de toda la pantalla envejece el dibujo diez años
     de una. */
  padding: 1.92cqw 0.96cqw 2.06cqw;
  border-radius: 1.65cqw 1.65cqw 0.82cqw 0.82cqw;
  /* NEGRO, no aluminio. En un MacBook la tapa es un cristal negro con
     la pantalla adentro; el aluminio se ve por el canto de afuera y por
     abajo, nunca alrededor de la pantalla. Estaba gris y por eso se veía
     como un marco de cuadro en vez de un computador.

     Casi plano a propósito: el cristal apenas aclara arriba, donde le
     pega la luz. Un degradado marcado acá lo vuelve plástico. */
  background: linear-gradient(170deg, #17171a 0%, #0a0a0c 55%, #050506 100%);
  /* El canto de aluminio: una línea finita alrededor, que es todo lo
     que se ve del cuerpo cuando el computador está de frente. */
  border: 1px solid #4b4b53;
  box-shadow:
    /* el filo de luz del canto de arriba */
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 30px 70px rgba(0, 0, 0, 0.62);
}
/* La cámara. Un punto de 5px con un brillo adentro, arriba y al centro
   del marco. Es lo más chico de todo el dibujo y es lo que más se echa
   de menos cuando no está: sin ella el marco de arriba no se entiende
   por qué es más ancho. */
#home-saas .pos-portatil-tapa::before {
  content: '';
  position: absolute;
  top: 0.69cqw; left: 50%;
  transform: translateX(-50%);
  width: 0.69cqw; height: 0.69cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #5a6070 0%, #23252c 45%, #08080a 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
  z-index: 2;
}
/* Adentro de la tapa, la ventana deja de flotar sola: ya no lleva
   sombra ni borde propios, porque lo que la sostiene es el marco. Lo
   que sí lleva es el filo negro que la separa del aluminio — sin esa
   línea la pantalla se ve pegada al marco y no hundida en él. */
#home-saas .pos-portatil-tapa .pos-ventana {
  border: none;
  border-radius: 0.55cqw;
  /* Con el marco ya negro, lo que separa la pantalla del cristal es un
     filo apenas más claro, no una línea negra: negro sobre negro no se
     ve nada y la pantalla queda flotando en un vacío. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
}
/* La base. Sale por los dos lados —ahí está la diferencia entre una
   pantalla y un portátil abierto— y es baja: mirado casi de frente,
   del teclado no se ve nada, solo el canto. */
#home-saas .pos-portatil-base {
  position: relative;
  width: 112%;
  margin-left: -6%;
  height: 1.79cqw;
  border-radius: 0 0 1.79cqw 1.79cqw;
  background: linear-gradient(180deg, #2a2a2f, #131316);
  box-shadow: 0 18px 34px rgba(0,0,0,0.55);
}
/* La muesca para abrirlo, en el canto. Es un detalle de tres píxeles y
   es lo que termina de decir "esto se abre y se cierra". */
#home-saas .pos-portatil-base::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 13%; height: 0.55cqw;
  border-radius: 0 0 0.82cqw 0.82cqw;
  background: rgba(255, 255, 255, 0.09);
}

/* ── El teléfono, apoyado en la esquina de la ventana ───────────
   Sobresale un poco por abajo y por la derecha a propósito: dos
   rectángulos alineados se leen como dos imágenes puestas una al lado
   de la otra; uno encima del otro y salido del borde se lee como dos
   objetos sobre un escritorio.

   El ancho va SOLO en porcentaje del computador, sin ningún mínimo en
   píxeles. Hubo uno —104px, para que en una ventana angosta no quedara
   del tamaño de una estampilla— y era peor el remedio: por debajo de
   cierto ancho el mínimo mandaba, el teléfono dejaba de encoger junto
   al computador y terminaba casi tan alto como él. Un teléfono es
   angosto pero largo: cada píxel que se le da de ancho se le multiplica
   por 2,17 de alto, así que un porcentaje de más se nota al doble.

   El 26% sale de medir los aparatos de verdad: un teléfono mide como un
   cuarto del ancho de un portátil abierto y como dos tercios de su
   alto, y con este número las dos proporciones calzan a la vez. Chico
   en una ventana chica es correcto — el computador también lo es. */
#home-saas .pos-hero-telefono,
#home-saas .pos-hero-aside .pos-telefono {
  position: absolute;
  right: -8%;
  bottom: -10%;
  width: 26%;
  z-index: 2;
}
/* El mismo criterio que el computador: todo lo de adentro se mide en
   cqw, porcentajes del ancho de este teléfono. El marco, las esquinas y
   la isla en píxeles fijos hacían que un teléfono chico se viera como
   un teléfono grande con un marco gigante. */
#home-saas .pos-telefono {
  container-type: inline-size;
  margin: 0;
  /* El borde grueso es el cuerpo del teléfono; el de adentro, la
     pantalla. Un solo borde de 1px se ve como una foto con marco, no
     como un aparato. */
  /* Mismo criterio que el computador: el marco de la pantalla es negro
     y el metal se ve solo por el canto, en una línea finita. Antes el
     relleno era gris claro y parecía un teléfono con una carcasa
     plateada encima. */
  /* Estos dos se miden contra el aside, no contra el teléfono (ver
     arriba). Lo de adentro —la pantalla, la isla, la cámara— sí se mide
     contra el teléfono, porque para ellos él sí es el contenedor. */
  padding: 0.41cqw;
  border-radius: 2.61cqw;
  background: #060607;
  border: 1px solid #4b4b53;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 26px 60px rgba(0, 0, 0, 0.68);
}
#home-saas .pos-telefono img {
  display: block;
  width: 100%;
  /* Hace falta aunque más abajo esté el aspect-ratio: el <img> lleva sus
     medidas reales en width/height (para que el navegador le reserve el
     hueco antes de que baje), y esos atributos valen como alto de verdad.
     Con el alto puesto, aspect-ratio no se aplica —solo entra cuando una
     de las dos dimensiones queda en auto— y la captura se estiraba a lo
     largo de la pantalla entera. */
  height: auto;
  /* El filo entre la pantalla y el marco, igual que en el computador:
     apenas más claro que el negro de alrededor. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
  /* Proporción de un teléfono de hoy. La captura se recorta a esta
     forma en vez de deformarse: mientras el placeholder sea una
     pantalla ancha, se muestra su esquina de arriba a la izquierda, que
     es donde está lo que se reconoce. */
  aspect-ratio: 9 / 19.5;
  object-fit: cover;
  object-position: left top;
  border-radius: 8.47cqw;
}
/* La isla de arriba, con la cámara adentro. Flota sobre la pantalla,
   centrada y separada del borde — pegada arriba sería el tajo de un
   teléfono de hace cinco años. */
#home-saas .pos-telefono-tajo {
  position: absolute;
  top: 4.76cqw; left: 50%;
  transform: translateX(-50%);
  width: 30%; height: 5.29cqw;
  background: #050506;
  border-radius: 999px;
  z-index: 2;
}
/* La cámara, dentro de la isla y corrida a un lado, que es donde va.
   Centrada se lee como un botón. */
#home-saas .pos-telefono-tajo::after {
  content: '';
  position: absolute;
  top: 50%; right: 16%;
  transform: translateY(-50%);
  width: 2.65cqw; height: 2.65cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #3f4658 0%, #171a20 50%, #000 100%);
}
#home-saas .pos-telefono { position: absolute; }

/* Mientras la página siga el ancho de la ventana, el teléfono no se
   asoma: se mete para adentro y se lleva más proporción.

   Dos cosas se arreglan juntas. La primera es el tamaño: el teléfono es
   un porcentaje del computador, y con el computador apretado quedaba en
   una tira de poco más de cien píxeles donde no se distinguía nada. La
   segunda es dónde termina: lo que sobresale necesita un margen donde
   sobresalir, y en estos anchos la página llega casi hasta el borde de
   la ventana — el teléfono terminaba lamiéndolo.

   El corte en 1552px no es un número elegido a ojo: es donde
   --pos-ancho deja de ser 94vw y se planta en 1460px (1460 ÷ 0,94). De
   ahí para arriba la página deja de crecer y aparece margen de verdad a
   los costados, que es justo lo que el teléfono necesita para
   asomarse. */
@media (max-width: 1552px) {
  /* Mismo selector que la regla de arriba, no uno más corto: aquella
     nombra el aside además del teléfono, así que pesa más y le ganaba a
     esta aunque viniera después y dentro de un media query. */
  #home-saas .pos-hero-aside .pos-telefono {
    right: 0;
    bottom: -7%;
    /* El tamaño no se toca: la proporción entre los dos aparatos es la
       misma en cualquier ventana. Lo único que cambia acá es que el
       teléfono no se asoma. */
  }
}

/* ══════════════════════════════════════════════════════════════
   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. */
/* En vidrio, no en morado pleno. Este botón está siempre encima de la
   página —es lo único que no se va con el scroll— y un morado sólido
   flotando sobre las fotos del fondo se leía como un cartel pegado
   arriba. Traslúcido deja ver lo que pasa por debajo mientras uno baja,
   que es justo lo que vuelve a poner el botón "sobre" la página en vez
   de "delante" de ella.

   El mismo vidrio que la barra de secciones, sin teñir: los dos son lo
   que flota por encima de la portada, y dos vidrios distintos flotando
   a la vez se leen como dos sistemas. Ni siquiera hace falta repetir
   los valores — la receta entera la pone .fx-vidrio, con las variables
   que trae por defecto (comun/css/utilidades.css).

   Y neutro deja el morado para una sola cosa en toda la pantalla: los
   botones del hero, que son la acción principal. */
#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-radius: 999px;
  color: #fff; font: inherit; font-size: var(--letra-menor); font-weight: 650;
  /* Es un <a> desde que "Tengo una duda" lleva a /contacto, así que hay
     que apagarle el subrayado que el navegador le pone a los enlaces. */
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.22s var(--ease-apple),
              opacity 0.22s var(--ease-apple),
              box-shadow 0.16s var(--ease-apple),
              background-color 0.16s var(--ease-apple);
}
#home-saas .pos-flotante i { font-size: var(--icono-texto); }
/* El hover repite los dos filos de luz de .fx-vidrio además de levantar
   la sombra: box-shadow es una sola propiedad, así que nombrar solo la
   sombra de afuera le borraría el relieve al vidrio justo al pasar el
   mouse. También se aclara un punto el vidrio, que es lo que hace que se
   sienta que responde. */
#home-saas .pos-flotante:hover {
  transform: translateY(-2px);
  background-color: rgba(38, 32, 54, 0.68);
  box-shadow:
    inset 0 1px 0 var(--fx-vidrio-luz),
    inset 0 -1px 0 var(--fx-vidrio-sombra),
    0 16px 40px rgba(0,0,0,0.5);
}
#home-saas .pos-flotante:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }


@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; }
}
@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
   ══════════════════════════════════════════════════════════════
   Un antes y un después con la foto en el medio: a la izquierda cómo
   se hace hoy, a la derecha cómo quedaría. El lado izquierdo va
   apagado y el derecho encendido — la diferencia de color hace la
   mitad del trabajo antes de que alguien lea una palabra.

   La foto al medio es la bisagra. Sin ella son dos listas de texto
   enfrentadas y hay que leerlas para entender que una es el problema;
   con ella, la de la izquierda ya se entiende antes de leerse. */
#home-saas .pos-tabla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  /* Los dos lados arrancan arriba, para que "CON CUADERNO Y EXCEL" y
     "CON FIXHUB" queden a la misma altura: centrados, el lado que tiene
     menos texto se hundía y los dos títulos quedaban desparejos. La
     foto sí va centrada (abajo), que es donde se ve como bisagra. */
  align-items: start;
  gap: clamp(18px, 3vw, 34px);
  border: 1px solid var(--pos-borde);
  border-radius: var(--pos-radio);
  padding: clamp(20px, 2.6vw, 30px);
  /* El mismo vidrio que el panel de "Cómo funciona" y el acordeón de
     las preguntas. Era un recuadro con borde y nada adentro: sobre la
     foto del fondo las dos listas quedaban sueltas en el aire y el
     borde no alcanzaba a decir que son un bloque. */
  background: var(--pos-carta);
  backdrop-filter: blur(var(--fx-vidrio-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--fx-vidrio-blur)) saturate(180%);
  box-shadow:
    inset 0 1px 0 var(--fx-vidrio-luz),
    inset 0 -1px 0 var(--fx-vidrio-sombra);
}
#home-saas .pos-lado h3 {
  margin: 0 0 16px;
  font-size: var(--letra-guia); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--vtx3);
}
#home-saas .pos-col-ahora { color: var(--va); }
#home-saas .pos-lado ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 13px;
}
#home-saas .pos-lado li {
  display: flex; align-items: flex-start; gap: 10px;
  /* El mismo cuerpo que la bajada de la sección (.pos-sub, más arriba):
     las dos son el texto que se lee de corrido en este bloque, y dos
     tamaños distintos para lo mismo se ven como un descuido. */
  font-size: var(--letra-texto);
  line-height: 1.5;
}
#home-saas .pos-lado li i { font-size: var(--icono-texto); flex-shrink: 0; margin-top: 1px; }
/* Los dos lados en el mismo blanco. El de la izquierda estuvo más
   apagado, para que el contraste hiciera el trabajo antes de leer, pero
   apagar el problema lo vuelve letra chica — y el problema es lo que la
   persona que está mirando reconoce como suyo. La diferencia la marcan
   la equis y el visto bueno, que es donde tiene que estar. */
#home-saas .pos-lado li     { color: var(--vtx2); }
#home-saas .pos-lado-antes li i { color: var(--color-rojo-suave); }
#home-saas .pos-lado-ahora li i { color: var(--pos-frio); }

#home-saas .pos-tabla-foto {
  margin: 0;
  align-self: center;
  border-radius: calc(var(--pos-radio) - 4px);
  overflow: hidden;
  /* La foto es clara y el resto de la página es oscuro: sin apagarla un
     poco se lee como un agujero de luz en medio del bloque. */
  filter: saturate(0.9) brightness(0.86);
}
#home-saas .pos-tabla-foto img { display: block; width: 100%; height: auto; }

/* Apilado, la misma historia se lee hacia abajo: el antes, la foto y el
   después. Va acá abajo y no en el bloque de pantallas angostas del
   medio del archivo a propósito: ese bloque está ANTES de la regla de
   arriba, y entre dos reglas que pesan lo mismo gana la última — la
   versión apilada no aplicaba nunca. */
@media (max-width: 860px) {
  #home-saas .pos-tabla { grid-template-columns: minmax(0, 1fr); }
  /* Apilada, la foto no tiene por qué ocupar el ancho completo: en un
     teléfono se ve mejor contenida que de borde a borde. */
  #home-saas .pos-tabla-foto { max-width: 420px; width: 100%; margin: 0 auto; }
}

/* ══════════════════════════════════════════════════════════════
   LOS TRES PASOS
   ══════════════════════════════════════════════════════════════ */
/* Las tarjetas se acomodan solas: entran de izquierda a derecha las que
   quepan y las demás bajan. No hay ningún ancho de ventana anotado acá
   —ni 440, ni 520, ni el que venga— porque esos números se van quedando
   viejos cada vez que cambia el texto o la cantidad de tarjetas, y uno
   termina persiguiéndolos de a uno.

   Cómo funciona: auto-fit crea tantas columnas como quepan de 170px
   para arriba, y el 1fr las deja repartirse el sobrante en partes
   iguales. El min(100%, 170px) es para el teléfono: ahí 170 sería más
   que la pantalla, así que la tarjeta pasa a ocupar el ancho completo
   en vez de desbordarse.

   El tope lo pone la lista, no cada tarjeta: 980px es lo que miden
   cinco de 180 con su separación, así que en una pantalla grande quedan
   las cinco paradas en una fila y no cinco franjas estiradas. */
#home-saas .pos-pasos-lista {
  list-style: none; padding: 0;
  margin: 0 auto;
  max-width: 980px;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  counter-reset: paso;
}
#home-saas .pos-paso-caja {
  position: relative;
  border: 1px solid var(--pos-borde);
  border-radius: var(--pos-radio);
  /* El mismo vidrio que el resto de las cajas de la portada. Acá sí va
     en cada tarjeta y no en la lista que las contiene: entre una y otra
     hay separación, así que no hay un borde compartido donde se note el
     corte del desenfoque. */
  background: var(--pos-carta);
  backdrop-filter: blur(var(--fx-vidrio-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--fx-vidrio-blur)) saturate(180%);
  box-shadow:
    inset 0 1px 0 var(--fx-vidrio-luz),
    inset 0 -1px 0 var(--fx-vidrio-sombra);
  padding: 20px 16px 18px;
  /* Sin alto mínimo ni proporción forzada. Cuando la tarjeta mide 180
     de ancho, el texto la estira sola hasta unos 200 de alto y queda
     parada; cuando ocupa el ancho del teléfono, queda baja, que es lo
     que corresponde. Un mínimo en píxeles se veía bien en el primer
     caso y dejaba un agujero abajo en el segundo. */

  /* Las tres partes de la tarjeta —el cuadradito, el título y el
     texto— se alinean con las de sus vecinas. "Reporte de inventario y
     ventas" ocupa tres líneas y "Gestión de ventas" dos, así que sin
     esto el texto de cada una empieza a distinta altura y la fila se
     lee como un serrucho.

     Se resuelve con subgrid: la tarjeta deja de tener filas propias y
     usa las de la lista, así que las tres partes comparten altura con
     las de todas las tarjetas de su fila. La alternativa era reservarle
     tres líneas fijas al título, y eso se rompe solo — con títulos
     cortos deja un hueco, y con uno más largo vuelve a desalinear.

     El espacio entre las tres partes lo siguen poniendo sus propios
     márgenes, por eso el row-gap va en cero: sin esto heredaría los
     16px que separan una tarjeta de otra. */
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 0;
}
/* El cuadradito de arriba de cada recuadro. Adentro puede ir un número,
   un ícono o una imagen, y el marco es el mismo para los tres: el
   tamaño lo manda esta caja y no lo que lleve dentro, así que una fila
   con unos y otros no queda despareja. */
#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: var(--letra-texto); font-weight: 750;
  overflow: hidden;
  flex-shrink: 0;
}
#home-saas .pos-paso-n i { font-size: var(--letra-tarjeta); line-height: 1; }
/* La imagen entra completa, sin recortarse: lo que va acá es un dibujo
   o un logo, y a un dibujo recortado le falta justo lo que lo explica.
   El relleno la despega del borde del marco. */
#home-saas .pos-paso-n img {
  width: 100%; height: 100%;
  padding: 5px;
  object-fit: contain;
}
/* Las tres partes se apoyan arriba de la fila que les toca. Sin esto,
   una celda más alta que su contenido lo centra, y el título de una
   tarjeta de dos líneas quedaría flotando entre el de tres líneas de la
   de al lado. */
#home-saas .pos-paso-caja > * { align-self: start; }
/* El mismo cuerpo que las listas del recuadro de arriba y que la bajada
   de la sección (ver .pos-sub y .pos-lado li): es todo texto que se lee
   de corrido en la misma pantalla, y dos tamaños para lo mismo se ven
   como un descuido.

   El título sube un punto con él. Si se queda en 17 mientras el texto
   llega a 17, los dos miden igual y el título deja de encabezar nada —
   lo único que lo distinguiría sería la negrita. */
#home-saas .pos-paso-caja h3 {
  margin: 0 0 8px;
  font-size: var(--letra-tarjeta);
  line-height: 1.25;
  font-weight: 680;
  color: var(--vtx);
}
#home-saas .pos-paso-caja p {
  margin: 0;
  font-size: var(--letra-texto);
  line-height: 1.55;
  color: var(--vtx3);
}

/* ══════════════════════════════════════════════════════════════
   EL PIE
   ══════════════════════════════════════════════════════════════ */
#home-saas .pos-pie {
  margin-top: var(--pos-aire);
  border-top: 1px solid var(--pos-borde);
}
#home-saas .pos-pie-abajo,
#vitp-registro-empresa .pos-pie-abajo {
  padding: 18px 20px;
  text-align: center;
  font-size: var(--letra-menor);
  color: var(--txt-tenue, var(--vtx3));
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 6px 14px;
}
/* El contacto, arriba del renglón de cierre. Antes eran cinco iconos
   pelados en fila; ahora cada uno lleva su rótulo y su valor escritos,
   igual que "Dónde estamos" en la portada del taller.

   En grilla y no en fila: con cuatro datos de largos muy distintos
   —"@fixhubpos" al lado de "1 Sur #811 Local 2, Talca"— una fila deja
   unos pegados y otros sueltos. La grilla les da el mismo ancho a
   todos, y cuando no caben dos por renglón pasa a uno solo. */
/* ── "Dónde estamos" ───────────────────────────────────────────────
   La misma sección que en la portada del taller: título, la tarjeta de
   datos a la izquierda y el mapa a la derecha, los dos del mismo alto.
   Y se apilan recién cuando los dos mínimos ya no caben lado a lado. */
#home-saas .pos-donde-caja {
  display: grid;
  grid-template-columns: minmax(350px, 1fr) minmax(230px, 1fr);
  gap: 18px;
  align-items: stretch;
  max-width: 1000px;
  margin: 0 auto;
}
@media (max-width: 700px) {
  #home-saas .pos-donde-caja { grid-template-columns: minmax(0, 1fr); }
  #home-saas .pos-donde-mapa { min-height: 260px; }
}
/* La columna derecha: la calificación arriba con el alto que pida, el
   mapa con lo que sobre. El min-height:0 hace falta o el 1fr no puede
   encoger bajo su contenido. */
#home-saas .pos-donde-lado {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
  min-height: 0;
}
#home-saas .pos-donde-google {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 10px 16px;
  padding: 14px 18px;
  border: 1px solid var(--vbor, rgba(255,255,255,0.08));
  border-radius: 16px;
  background: var(--pos-carta);
  backdrop-filter: blur(var(--fx-vidrio-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--fx-vidrio-blur)) saturate(180%);
  box-shadow:
    inset 0 1px 0 var(--fx-vidrio-luz),
    inset 0 -1px 0 var(--fx-vidrio-sombra);
}
#home-saas .pos-donde-google-nota {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 9px;
  text-decoration: none;
  color: var(--txt-titulo, var(--vtx));
}
#home-saas .pos-donde-google-nota > strong {
  font-size: 24px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
#home-saas .pos-donde-estrellas {
  display: inline-flex; gap: 2px;
  color: #f5a524; font-size: 14px; line-height: 1;
}
#home-saas .pos-donde-cuantas {
  font-size: var(--fs-sm, 13px);
  color: var(--txt-sub, var(--vtx3));
}
#home-saas .pos-donde-google-nota:hover .pos-donde-cuantas { color: var(--va2, var(--va)); }
/* El botón, discreto: es un enlace más de la tarjeta, no la acción
   principal de la página. */
#home-saas .pos-donde-btn-resena {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--vbor, rgba(255,255,255,0.08));
  background: rgba(255,255,255,0.04);
  color: var(--txt-titulo, var(--vtx));
  text-decoration: none;
  font-size: var(--fs-sm, 13px); font-weight: 650;
  white-space: nowrap;
  transition: border-color 0.15s var(--ease-apple), color 0.15s var(--ease-apple);
}
#home-saas .pos-donde-btn-resena i { color: #f5a524; font-size: 15px; }
#home-saas .pos-donde-btn-resena:hover { border-color: var(--va); color: var(--va2, var(--va)); }

#home-saas .pos-donde-mapa {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--vbor, rgba(255,255,255,0.08));
  min-height: 0;
}
#home-saas .pos-donde-mapa iframe {
  display: block;
  width: 100%; height: 100%;
  border: 0;
  /* El mapa de Google viene en blanco puro y sobre el fondo oscuro del
     sitio es una linterna. Invertido y girado queda oscuro sin que los
     colores de las calles y el agua salgan cambiados. */
  filter: invert(0.92) hue-rotate(180deg) saturate(0.85) brightness(0.95);
}

/* La tarjeta de datos (.tal-donde-datos en el taller). */
#home-saas .pos-pie-donde,
#vitp-registro-empresa .pos-pie-donde {
  padding: 24px;
  border: 1px solid var(--vbor, rgba(255,255,255,0.08));
  border-radius: 16px;
  background: var(--pos-carta);
  backdrop-filter: blur(var(--fx-vidrio-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--fx-vidrio-blur)) saturate(180%);
  box-shadow:
    inset 0 1px 0 var(--fx-vidrio-luz),
    inset 0 -1px 0 var(--fx-vidrio-sombra);

  text-align: left;
  /* El gap es el que separa las formas de contacto de la línea del
     horario. Sin él el borde de arriba de .pos-pie-horario quedaba
     pegado al renglón del correo: margin-top:auto solo estira cuando
     sobra alto, y cuando la tarjeta ya mide lo mismo que la columna
     del mapa no sobra nada. En el taller esos 14px vienen del gap de
     .tal-donde-datos, que es el mismo que separa las filas. */
  display: flex; flex-direction: column; gap: 14px;
}
#home-saas .pos-pie-contacto,
#vitp-registro-empresa .pos-pie-contacto {
  display: flex; flex-direction: column; gap: 14px;
}
/* El horario, abajo y con una línea de por medio: arriba están las
   formas de llegar, y esto no es una más — es cuándo sirven. */
#home-saas .pos-pie-horario,
#vitp-registro-empresa .pos-pie-horario {
  /* Pegado abajo del todo: así la tarjeta llega al mismo alto que el
     mapa de al lado en vez de dejar un hueco. */
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--vbor, rgba(255,255,255,0.08));
}
/* Un renglón por tramo: en una sola línea con un separador cuesta
   leerlo. */
#home-saas .pos-pie-tramos,
#vitp-registro-empresa .pos-pie-tramos { white-space: pre-line; }
/* El reloj va sin caja dibujada, a propósito. */
#home-saas .pos-pie-dato > i,
#vitp-registro-empresa .pos-pie-dato > i {
  flex: 0 0 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--va2, var(--va)); font-size: 20px;
}
#home-saas .pos-pie-dato,
#vitp-registro-empresa .pos-pie-dato {
  display: flex; align-items: flex-start; gap: 13px;
  text-decoration: none;
  color: inherit;
}
/* La caja del icono, del mismo ancho en los cuatro: si cada logo midiera
   lo suyo, los rótulos arrancarían cada uno en su columna. */
#home-saas .pos-pie-dato > .vit-red,
#vitp-registro-empresa .pos-pie-dato > .vit-red { flex: 0 0 36px; }
#home-saas .pos-pie-dato-texto,
#vitp-registro-empresa .pos-pie-dato-texto { min-width: 0; }
#home-saas .pos-pie-rotulo,
#vitp-registro-empresa .pos-pie-rotulo {
  display: block;
  font-size: var(--fs-xs, 11px); font-weight: 650;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--txt-sub, var(--vtx3));
  margin-bottom: 2px;
}
#home-saas .pos-pie-valor,
#vitp-registro-empresa .pos-pie-valor {
  display: block;
  font-size: 14px; color: var(--vtx);
  overflow-wrap: anywhere;
}
#home-saas .pos-pie-dato:hover .pos-pie-valor,
#vitp-registro-empresa .pos-pie-dato:hover .pos-pie-valor { color: var(--va2, var(--va)); }
#home-saas .pos-pie-legal,
#vitp-registro-empresa .pos-pie-legal { display: inline-flex; align-items: center; gap: 8px; }
#home-saas .pos-pie-legal .pos-enlace,
#vitp-registro-empresa .pos-pie-legal .pos-enlace { font-size: inherit; color: var(--vtx2); }

/* ══════════════════════════════════════════════════════════════
   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;
  /* La referencia del botón de play que va encima del video. */
  position: relative;
  border: 1px solid var(--pos-borde2);
  border-radius: 12px;
  overflow: hidden;
  background: #101010;
  box-shadow: 0 22px 54px rgba(0,0,0,0.5);
}
/* En cqw como el resto del aparato: es la parte donde más se notaba
   que no encogía, porque una franja de 9px de alto en un computador de
   300px de ancho es un cintillo enorme. */
#home-saas .pos-ventana-barra {
  display: flex; align-items: center; gap: 1.65cqw;
  padding: 1.24cqw 1.65cqw;
  background: linear-gradient(180deg, #232323, #1b1b1b);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
/* Sola en la barra, la dirección se centra y no se estira de lado a
   lado: un campo del ancho de la ventana entera no se parece a ningún
   navegador. */
#home-saas .pos-ventana-url {
  width: min(58%, 320px);
  margin: 0 auto;
  background: rgba(0,0,0,0.34);
  border-radius: 0.82cqw;
  padding: 0.55cqw 1.37cqw;
  font-size: 1.58cqw;
  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; }

/* Cuando el panel tiene texto a un lado y una captura al otro, 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.

   El :not() no es un adorno: el panel de los tres pasos quiere sus
   mitades iguales, y esta regla —que pesa más que la suya y viene más
   abajo— se las partía en 0,78 y 1,22 dejando la captura en la
   columna angosta. */
@media (min-width: 861px) {
  #home-saas .pos-panel:has(.pos-ventana):not(.pos-panel-pasos) {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  }
}

/* ── El titular cuando el hero va en dos columnas ───────────────── */
/* Acá crece más despacio que en una columna: la del texto es angosta y
   un titular que llega a su tamaño máximo antes que la columna al suyo
   se parte en pedazos.

   Los tres números son un 20% menos de lo que eran (40/4,4vw/62), la
   misma rebaja que la regla de más arriba. El titular pasó de tres
   palabras a doce: al cuerpo viejo se comía la pantalla entera y había
   que esquivarlo para llegar a los botones. */
@media (min-width: 901px) {
  #home-saas .pos-h1 { font-size: var(--letra-portada-ancha); }
}

/* ── La barra de secciones ──────────────────────────────────────── */
/* Flota: no toca el borde de arriba ni los de los lados, y el fondo de
   la página se ve alrededor y a través. El vidrio es una sola capa —un
   fondo casi transparente, el desenfoque de lo que pasa por detrás y un
   filo de luz arriba—, que es de donde sale la sensación de espesor.
   Sin el desenfoque quedaría un rectángulo gris encima de la foto.

   Se sigue pegando al bajar, pero a la altura de las otras barras MÁS un
   respiro: pegada al borde se ve como parte del navegador, separada se ve
   como parte de la página. La altura de lo que hay encima la mide
   _acomodarBarraSecciones() (el aviso morado puede estar o no, según la
   configuración del taller); los 91px de respaldo son la suma de las dos
   con el aviso puesto, por si el script no alcanzó a correr. */
/* ── LA BARRA DE LA PORTADA ES LA BARRA DE FIXHUB ────────────────
   Acá vivían dos reglas más: la de una barra propia para las secciones
   (#home-saas .pos-secciones) y la de su caja de vidrio. Eran una
   SEGUNDA barra, flotando justo debajo de la de FixHub.

   Dos barras pegadas una sobre la otra se comen la mitad de lo que se
   ve al entrar, y el ojo las lee como dos menús distintos cuando son el
   mismo. Ahora hay una sola: la de FixHub se vuelve pastilla de vidrio
   flotante y las secciones se dibujan adentro, al lado del logo y de
   los botones (ver _montarSeccionesEnLaBarra en portada-pos.js).

   Esto vale SOLO en la portada. La clase la pone y la quita
   _sincronizarBarraDePortada mirando si #home-saas se ve; en
   /contacto, en /registro-empresa y con sesión iniciada, la barra es la
   sólida de siempre y el hueco de las secciones queda vacío. */
html.pos-portada-a-la-vista .vit-nav {
  /* El fondo lo pone la pastilla de adentro, no la barra: lo que va a
     los costados tiene que dejar ver la foto. */
  background: transparent;
  padding: 12px 16px;
  /* El hueco de los lados deja pasar el clic a lo que haya debajo. */
  pointer-events: none;
}
html.pos-portada-a-la-vista .vit-nav > .vit-nav-right {
  pointer-events: auto;
  /* Mide lo que mide su contenido y se centra, en vez de ocupar el
     ancho entero: eso es lo que la vuelve una pastilla y no una franja.
     El vidrio y la sombra se los ponen las clases .fx-vidrio /
     .fx-vidrio-flota, que pone el javascript — la receta del vidrio
     vive en un solo lugar (comun/css/utilidades.css) y no se copia. */
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  padding: 6px 14px;
  gap: 10px;
  border-bottom: none;
  border-radius: 999px;
}
/* El grupo del medio no se estira acá: con flex:1 empujaba el logo a un
   extremo y los botones al otro, y la pastilla volvía a medir el ancho
   de la pantalla. */
html.pos-portada-a-la-vista .vit-nav .vit-nav-group-center { flex: 0 1 auto; }

/* Y la portada se mete DEBAJO de la barra, que ahora flota. El hueco de
   arriba lo repone el relleno del hero, que ya descuenta esta misma
   variable (ver #home-saas .pos-hero). La mide
   _acomodarBarraSecciones(). */
html.pos-portada-a-la-vista #home-saas {
  margin-top: calc(-1 * var(--pos-barra-alto, 74px));
}

/* ── La lista de secciones, ya dentro de la barra ────────────────
   Escondida por omisión: el navbar es el mismo en todo el programa, y
   estas secciones son anclas de la portada. En /contacto o adentro del
   programa llevarían a trozos de una página que no está a la vista. */
.vit-nav-secciones { display: none; min-width: 0; }
html.pos-portada-a-la-vista .vit-nav-secciones {
  display: flex;
  position: relative;
}

/* El ☰ no existe mientras las secciones quepan en la barra. */
.pos-secciones-menu { display: none; }
.vit-nav-secciones .pos-secciones-lista {
  position: relative;   /* la pastilla que se desliza se mide contra esto */
  display: flex; align-items: center; gap: 2px;
  margin: 0; padding: 0; list-style: none;
  /* En pantalla angosta la lista se desliza en vez de apilarse: una
     barra de secciones de tres líneas ocupa más que la sección a la que
     lleva. */
  overflow-x: auto;
  scrollbar-width: none;
  /* Y el min-width:0 es lo que hace que ese overflow sirva. La lista es
     hija de un flex, y un hijo de flex no baja del ancho de su
     contenido salvo que se le diga: sin esto la lista medía lo que
     miden sus pastillas, nunca se pasaba de su propio ancho y el
     overflow-x no tenía qué desbordar — la última pastilla se salía de
     la barra y la cortaba el borde de la pantalla. Con cinco secciones
     no se notaba; con "Dónde estamos" son seis y ya no entran. */
  min-width: 0;
}
.vit-nav-secciones .pos-secciones-lista::-webkit-scrollbar { display: none; }
/* La pastilla que viaja. Es la ÚNICA que pinta el fondo de la sección
   activa: los enlaces solo cambian de color. Por eso puede deslizarse —
   un fondo por enlace solo puede aparecer y desaparecer.

   El viaje va en transform y width, las dos cosas que el navegador puede
   animar sin volver a maquetar la barra en cada cuadro.

   La curva es la de iOS: arranca decidida y frena largo. Una curva
   simétrica (ease-in-out) deja el movimiento con aire de diapositiva; lo
   que da la sensación de peso es justamente esa frenada. */
.vit-nav-secciones .pos-secciones-marca {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1),
              width     0.42s cubic-bezier(0.32, 0.72, 0, 1),
              opacity   0.22s var(--ease-apple);
}
.vit-nav-secciones .pos-secciones-marca.visible { opacity: 1; }

.vit-nav-secciones .pos-secciones-lista a {
  position: relative;   /* por encima de la pastilla */
  z-index: 1;
  display: block;
  padding: 9px 15px;
  border-radius: 999px;
  color: var(--vtx3);
  font-size: var(--letra-menor); font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s var(--ease-apple), background 0.18s var(--ease-apple);
}
.vit-nav-secciones .pos-secciones-lista a:hover {
  color: var(--vtx);
  background: rgba(255, 255, 255, 0.07);
}
/* El activo solo aclara su texto. El fondo lo pone la pastilla de
   arriba, que es la que se mueve. */
.vit-nav-secciones .pos-secciones-lista a.activa {
  color: var(--vtx);
}
.vit-nav-secciones .pos-secciones-lista a:focus-visible { outline: 2px solid var(--va); outline-offset: -2px; }
/* El salto tiene que dejar libre lo que miden las barras pegadas, si no
   el título de la sección aterriza justo detrás de ellas.

   Y se le descuenta el aire de arriba de la propia sección. Ese relleno
   es lo que separa una sección de la anterior cuando uno va bajando de
   corrido, pero en un salto no separa nada: nadie viene de arriba. Sin
   descontarlo, el salto sumaba las dos cosas —lo que miden las barras
   MÁS el aire de la sección— y el título aterrizaba medio cuerpo más
   abajo de donde tenía que quedar, dejando ver la cola de la sección
   anterior.

   Los 4px que se suman son el respiro entre la barra y el título, y son
   pocos a propósito: este número no solo decide dónde queda el título,
   decide cuánto de la sección entra en la pantalla. Cada píxel que se
   regala acá arriba es un píxel que le falta abajo, y la sección más
   larga —la pregunta con su recuadro— ya apenas cabe. La barra flota
   con su propio aire alrededor, así que el título no queda lamiendo el
   vidrio aunque el número sea chico. */
#home-saas .pos-seccion {
  scroll-margin-top: calc(var(--pos-salto, 150px) - var(--pos-aire) + 4px);
}

/* En el teléfono la pastilla se aprieta, para que quepan más secciones
   antes de tener que deslizarla de lado. */
/* ── ANTES DE PLEGAR, APRETAR ────────────────────────────────────
   Los seis nombres miden 654px escritos. Con el logo (72), los dos
   botones (252) y los aires del medio, la barra necesita 1.070px para
   mostrarlos enteros — medido, no estimado.

   Abajo de eso la lista se recortaba contra el borde de la pastilla:
   "Dónde estamos" quedaba en "D" y no había forma de llegar al resto.
   Antes de esconderlos detrás del ☰ se les quita aire, que es lo que
   menos se nota, en dos pasos:

     sin apretar   654px → la barra necesita 1.081
     paso 1        594px → necesita 1.021     (menos relleno)
     paso 2        558px → necesita   985     (menos todavía)

   Lo que se achica es el AIRE alrededor de cada nombre, NUNCA la
   letra. Probé bajarle el tamaño a la letra y se nota al tiro: la barra
   entera parece otra al achicar la ventana, y los nombres quedan
   chicos justo cuando la pantalla ya es chica. El aire, en cambio,
   nadie lo echa de menos.

   Los tres números salen de medir, no de calcular: el ancho natural de
   la lista con cada relleno, más los 416px que ocupan el logo, los dos
   botones y los aires de la barra.

   Y los pisos se COMPROBARON uno por uno achicando la ventana hasta
   que la lista se recortaba: calculados daban 11px menos de lo que
   piden de verdad. Los de arriba son los medidos. */
@media (max-width: 1080px) {
  .vit-nav-secciones .pos-secciones-lista a { padding: 8px 10px; }
}
@media (max-width: 1020px) {
  .vit-nav-secciones .pos-secciones-lista a { padding: 7px 7px; }
}

/* ── CUANDO YA NO SE PUEDE APRETAR MÁS ───────────────────────────
   985px es el piso medido: abajo de ahí los seis nombres no entran ni
   con el relleno al mínimo, y achicarles la letra no es una opción.

   Lo que se pliega es la lista, y solo la lista: "Prueba gratis" e
   "Iniciar sesión" se quedan siempre a la vista. Son la puerta de
   entrada al producto; esconderlas detrás de un ☰ en el teléfono —que
   es justamente donde más gente llega— es esconder el negocio.

   Antes acá la barra se partía en dos renglones con las secciones
   deslizándose abajo. Funcionaba, pero se llevaba 113px de alto en una
   pantalla de 812 y las secciones se cortaban contra el borde. */
@media (max-width: 984px) {
  html.pos-portada-a-la-vista .vit-nav { padding: 8px 10px; }

  /* Plegada, la barra deja de medir lo que mide su contenido y se
     estira. Con tres cosas adentro —logo, botones y ☰— una pastilla que
     abraza queda chiquita en medio de la pantalla y se lee como un
     cartel suelto, no como la barra del sitio. El tope es el mismo que
     el de la portada ancha. */
  html.pos-portada-a-la-vista .vit-nav > .vit-nav-right {
    width: 100%;
    max-width: 1040px;
    padding: 5px 8px 5px 14px;
    gap: 4px;
    /* Una sola línea, pase lo que pase. Bajo 640px el navbar deja que su
       fila se parta en dos (vitrina.css, pensado para el buscador y el
       carrito del programa), y acá eso mandaba el ☰ a un segundo
       renglón, debajo del logo y pegado a la izquierda: justo lo
       contrario de donde tiene que estar. Medido a 301px de ancho. */
    flex-wrap: nowrap;
  }
  /* Y si aun así no alcanza, que ceda el logo y no el ☰: el logo
     recortado sigue diciendo FixHub, un botón a medias no sirve.

     flex-shrink:1 además de min-width:0, que es lo que faltaba: el
     grupo del logo viene con shrink:0 del navbar, así que no cedía
     nada y el que se iba afuera era el ☰ — asomando fuera de la
     pastilla, del lado derecho. Medido: sin esto se escapaba bajo
     282px; con esto el logo se recorta primero y aguanta hasta 230,
     que es más angosto que cualquier teléfono. */
  html.pos-portada-a-la-vista .vit-nav-group-left { min-width: 0; flex-shrink: 1; }
  html.pos-portada-a-la-vista .vit-nav-group-left > .vit-logo {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  /* El grupo del medio va vacío en la portada —sus botones son del
     programa, y a la portada se llega sin sesión— y bajo 640px pide una
     fila entera para él solo. Escondido no deja ese renglón vacío ni se
     mete entre el logo y los botones. */
  html.pos-portada-a-la-vista .vit-nav-group-center { display: none; }
  /* Logo pegado a la izquierda; botones y ☰ juntos a la derecha. */
  html.pos-portada-a-la-vista .vit-nav-group-right { margin-left: auto; }
  /* El ☰ al final de todo: después de "Prueba gratis" y de "Iniciar
     sesión". Ahí es donde la mano lo busca, y ahí no le quita el primer
     lugar a lo que el visitante vino a apretar. */
  html.pos-portada-a-la-vista .vit-nav-secciones { order: 3; }

  /* El botón, con la misma pinta que los demás íconos de la barra. */
  html.pos-portada-a-la-vista .pos-secciones-menu {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--vtx3);
    font-size: 18px;
    cursor: pointer;
    transition: color 0.18s var(--ease-apple), background 0.18s var(--ease-apple);
  }
  html.pos-portada-a-la-vista .pos-secciones-menu:hover { color: var(--vtx); background: rgba(255,255,255,0.07); }
  html.pos-portada-a-la-vista .vit-nav-secciones.abierto .pos-secciones-menu {
    color: var(--vtx);
    background: rgba(255,255,255,0.12);
  }
  html.pos-portada-a-la-vista .pos-secciones-menu:focus-visible { outline: 2px solid var(--va); outline-offset: 2px; }

  /* La lista deja de ser una fila y pasa a ser un panel colgando de la
     barra. Sale del flujo para no ensanchar la pastilla: la barra mide
     lo mismo esté abierto o cerrado. */
  html.pos-portada-a-la-vista .vit-nav-secciones .pos-secciones-lista {
    position: absolute;
    /* Por encima de la portada, que se mete debajo de la barra con un
       margen negativo y si no le gana al panel. */
    z-index: 5;
    top: calc(100% + 10px);
    /* Anclado a la derecha y no centrado bajo el ☰: el botón vive
       pegado al borde, y un panel centrado en él se saldría media caja
       fuera de la pantalla. */
    right: 0;
    left: auto;
    transform: translateY(-6px);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    min-width: 210px;
    max-width: 78vw;
    padding: 6px;
    border-radius: 16px;
    overflow: visible;
    /* Opaca: ver el comentario del <ul> en portada-pos.js. Un menú tapa
       lo que hay detrás; además acá el desenfoque no sirve, porque la
       barra de la que cuelga ya es de vidrio y un desenfoque anidado no
       alcanza a ver la página. */
    background: #141414;
    border: 1px solid var(--fx-vidrio-borde);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    /* Cerrado no se ve y no se puede tocar, pero sigue en el documento:
       los enlaces tienen que seguir existiendo para el teclado y para
       quien lea la página con un lector de pantalla. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s var(--ease-apple), transform 0.18s var(--ease-apple), visibility 0.18s;
  }
  html.pos-portada-a-la-vista .vit-nav-secciones.abierto .pos-secciones-lista {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  /* La pastilla que viaja es de la fila; en una columna no significa
     nada (ver _moverMarcaActiva, que se sale sola al verla escondida).
     Acá el activo se marca con su propio fondo. */
  html.pos-portada-a-la-vista .vit-nav-secciones .pos-secciones-marca { display: none; }
  html.pos-portada-a-la-vista .vit-nav-secciones .pos-secciones-lista a.activa {
    background: rgba(255, 255, 255, 0.12);
  }
  html.pos-portada-a-la-vista .vit-nav-secciones .pos-secciones-lista a {
    padding: 9px 14px;
    text-align: left;
  }
}




/* ══════════════════════════════════════════════════════════════
   EL ALTA DE TALLERES, CON LA CARA DE LA PORTADA
   ══════════════════════════════════════════════════════════════
   Es la página a la que lleva cada "Empezar gratis", así que hasta
   ahora se pasaba de la portada —foto de taller, vidrio, aire— a un
   formulario gris sobre negro plano, y el salto se sentía como haber
   salido del sitio. Acá recibe la misma foto y las mismas superficies.

   Va en esta hoja y no en utilidades porque la foto vive en /pos/img:
   es del producto, no de las dos páginas. */
/* OJO: acá NO va un position. La página ya es position:fixed por
   .vitp-page, que es lo que la mantiene quieta ocupando la pantalla, y
   este selector —un id— le gana a esa clase: poniéndole "relative" la
   página se soltaba y caía al final del documento, abajo de la portada,
   con el formulario fuera de pantalla. Fixed ya sirve de referencia
   para la capa de abajo, que es lo único que hacía falta.

   isolation sí: sin ella la capa de z-index negativo se escapa del
   contexto de la página y termina debajo del fondo opaco de
   .vitp-page, que es el mismo golpe que ya nos costó una tarde en la
   portada. */
#vitp-registro-empresa {
  isolation: isolate;
}
#vitp-registro-empresa .reg-fondo {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
}
#vitp-registro-empresa .reg-fondo-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 55%;
  /* Los mismos tres ajustes que las fotos de la portada: apagada,
     oscurecida y con un punto de contraste, para que sea fondo y no
     compita con un formulario que hay que leer. */
  filter: saturate(0.62) brightness(0.78) contrast(1.04);
}
#vitp-registro-empresa .reg-fondo-velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(20,20,20,0.74) 16%, rgba(20,20,20,0.62) 46%, rgba(20,20,20,0.5) 78%, rgba(20,20,20,0.62)),
    linear-gradient(0deg, var(--vb), transparent 30%);
}

/* El formulario y las tarjetas de plan, en vidrio. Usan las variables
   de .fx-vidrio (utilidades) y no valores propios: es la misma
   superficie que la barra de secciones y el botón de dudas, y tres
   vidrios distintos en el mismo sitio se notan. */
/* El fondo es --pos-carta, el mismo lavado de blanco de las tarjetas de
   la portada, y NO --fx-vidrio-fondo. Ese tono es rgba(22,18,34): tiene
   el azul cuatro puntos por debajo del rojo, y encima de una foto
   apagada eso se lee como que toda la página está pintada de azul. Sirve
   para lo que flota y es chico —una barra, un botón—, no para media
   pantalla de formulario. El desenfoque de atrás sí se queda, que es lo
   que hace el vidrio. */
#vitp-registro-empresa .admin-form,
#vitp-registro-empresa .reg-plan {
  background: var(--pos-carta);
  backdrop-filter: blur(var(--fx-vidrio-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--fx-vidrio-blur)) saturate(180%);
  border-color: var(--pos-borde);
  box-shadow:
    inset 0 1px 0 var(--fx-vidrio-luz),
    inset 0 -1px 0 var(--fx-vidrio-sombra);
}
/* El plan elegido, con el mismo lila que el de la portada. */
#vitp-registro-empresa .reg-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);
}
/* Los campos, un punto más oscuros que el vidrio que los contiene.
   Sobre una superficie translúcida un campo translúcido desaparece, y
   lo que tiene que verse es dónde se escribe. */
#vitp-registro-empresa .admin-form input,
#vitp-registro-empresa .admin-form select,
#vitp-registro-empresa .admin-form textarea {
  background: rgba(10, 10, 10, 0.55);
}

/* Las tarjetas de plan del alta, iguales a las de la portada. Mismo
   radio, mismo borde, misma escala de letra y misma promoción anual:
   son la misma decisión tomada dos veces, y verlas distintas hace dudar
   de si son los mismos planes. Lo único propio es el tilde, porque acá
   no hay un botón por tarjeta que diga cuál se eligió. */
#vitp-registro-empresa .reg-plan {
  gap: 5px;
  padding: 19px 16px 16px;
  border-radius: var(--pos-radio);
}
#vitp-registro-empresa .reg-plan-nombre {
  font-size: var(--letra-texto);
  font-weight: 650;
  letter-spacing: 0;
  color: var(--vtx);
}
#vitp-registro-empresa .reg-plan-precio {
  font-size: var(--letra-destacada);
  font-weight: 780;
  letter-spacing: -0.03em;
  color: var(--txt-titulo);
  font-variant-numeric: tabular-nums;
}
/* Al lado del precio y no debajo, como en la portada: en dos renglones
   el "al mes" se leía como una línea más de la tarjeta en vez de como
   la unidad del número que tiene al lado. */
#vitp-registro-empresa .reg-plan-precio small {
  display: inline;
  font-size: var(--letra-texto);
  font-weight: 500;
  color: var(--vtx3);
  margin-left: 5px;
  letter-spacing: 0;
}
#vitp-registro-empresa .reg-plan-anual {
  margin-top: 4px;
  font-size: var(--letra-texto);
  color: var(--vtx3);
  font-variant-numeric: tabular-nums;
  /* Dos líneas siempre: en PRO y BUSINESS el precio tachado se va abajo
     y en STARTER no, así que sin esto las tarjetas quedan de distinto
     alto y los renglones de abajo no calzan entre columnas. */
  min-height: 2.4em;
  line-height: 1.2;
}
/* Escondido pero ocupando: el renglón vacío de FREE, y el del tope de
   ventas en los planes que no tienen tope. Es visibility y no display a
   propósito — lo que se busca es que siga ocupando el lugar. */
#vitp-registro-empresa .reg-plan-anual-hueco { visibility: hidden; }
#vitp-registro-empresa .reg-plan-anual strong { color: var(--pos-frio); font-weight: 700; }
#vitp-registro-empresa .reg-plan-anual s {
  color: var(--txt-tenue, var(--vtx3));
  opacity: 0.6;
  margin-left: 4px;
  display: inline-block;
}
#vitp-registro-empresa .reg-plan-usuarios {
  margin-top: 10px;
  display: flex; align-items: center; gap: 7px;
  font-size: var(--letra-texto);
  color: var(--vtx3);
  /* Sin la línea de arriba que traía de antes: la tarjeta de la portada
     no la tiene, y acá partía en dos una tarjeta que ya es chica. */
  border-top: 0;
  padding-top: 0;
}
#vitp-registro-empresa .reg-plan-usuarios i { color: var(--va); font-size: var(--icono-texto); }

/* El pie del alta. La portada se lo pega al ancho completo de la
   página; acá vive adentro de la columna que scrollea, así que le toca
   su propio aire arriba y ninguno abajo. */
#vitp-registro-empresa .pos-pie {
  margin-top: 40px;
  border-top: 1px solid var(--pos-borde);
  /* Los márgenes negativos cancelan el relleno de .fx-form-pagina, que
     es quien lo contiene: así la línea de arriba cruza de lado a lado
     como en la portada, en vez de quedar con 20px de aire a cada lado. */
  margin-left: -20px;
  margin-right: -20px;
  margin-bottom: -60px;
}

/* El video del recorrido, adentro de la ventana dibujada. Se comporta
   igual que las capturas que ocupaban ese lugar: llena el ancho y la
   ventana le da el alto. */
#home-saas .pos-video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0 0 calc(var(--pos-radio) - 2px) calc(var(--pos-radio) - 2px);
}
/* Si alguien pidió menos movimiento en su sistema, el video se queda
   quieto en su primer cuadro. Es una demostración, no información que
   se pierda por no verla moverse. */
@media (prefers-reduced-motion: reduce) {
  #home-saas .pos-video { animation-play-state: paused; }
}

/* El triángulo grande encima del video. Se ve mientras el video está
   quieto y se va apenas arranca — la clase la pone _seguirVideos
   (portada-pos.js) escuchando play y pause.

   No tapa la barra de controles: se corre hacia arriba la mitad de lo
   que ella mide, así el dedo que va al triángulo no cae en la línea de
   tiempo por error. */
#home-saas .pos-video-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, calc(-50% - 18px));
  width: 84px; height: 84px;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid var(--fx-vidrio-borde);
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.62);
  backdrop-filter: blur(var(--fx-vidrio-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--fx-vidrio-blur)) saturate(180%);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  transition: opacity 0.2s var(--ease-apple), transform 0.2s var(--ease-apple);
}
/* El triángulo, un punto a la derecha del centro: centrado de verdad se
   ve corrido a la izquierda, porque su masa está toda en la punta. */
#home-saas .pos-video-play svg { width: 40px; height: 40px; margin-left: 4px; }
#home-saas .pos-video-play:hover {
  background: rgba(106, 27, 154, 0.55);
  transform: translate(-50%, calc(-50% - 18px)) scale(1.06);
}
#home-saas .pos-video-play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* Corriendo: se va, y deja de estorbar los clics sobre el video. */
#home-saas .pos-ventana-corriendo .pos-video-play {
  opacity: 0;
  pointer-events: none;
}