/* ═══════════════════════════════════════════════════════════════════════════
   Página pública de Ventrax. Depende de `base.css` (tokens, reset, barra).

   La estructura ES una conversación: el visitante pregunta, el asesor responde,
   y cada respuesta abre una demostración. No es decoración — la acción que la
   página persigue es que el visitante escriba por el chat, así que la página se
   comporta como aquello a lo que invita.

   Color comprometido: el azul ocupa regiones enteras (cada respuesta del
   asesor), no acentos sueltos sobre gris. Es lo que separa esta superficie de
   los manuales, que usan la misma paleta en registro contenido.
   ═══════════════════════════════════════════════════════════════════════════ */

.lienzo{max-width:1180px; margin:0 auto; padding:0 28px 0}
@media (max-width:640px){ .lienzo{padding:0 18px} }

/* ── Primera pantalla ───────────────────────────────────────────────────── */
/* Dos columnas en escritorio: la tesis a la izquierda y el asesor a la derecha. La primera
   pantalla tiene que demostrar el mecanismo, no anunciarlo — y en una sola columna dejaba
   media composición vacía mientras la demostración esperaba bajo el pliegue. */
.apertura{
  padding:88px 0 20px; display:grid; gap:56px; align-items:center;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:980px){
  .apertura{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); padding:96px 0 28px}
}
.apertura-dicho{min-width:0}

/* Retrato del asesor: la misma forma que tendrá en el sitio del cliente. */
.ventana{
  min-width:0; background:var(--vx-superficie); border:1px solid var(--vx-borde);
  border-radius:20px; box-shadow:var(--vx-sombra-3); overflow:hidden;
}
.ventana-cab{
  display:flex; align-items:center; gap:12px; padding:16px 20px;
  background:var(--vx-acento); color:#fff;
}
.ventana-ini{
  width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:rgba(255,255,255,.18); font-weight:700; font-size:.875rem;
}
.ventana-quien{min-width:0}
.ventana-quien b{display:block; font-size:.9375rem; font-weight:600; line-height:1.3}
/* La clase, y no `.ventana-cab span`: ese selector alcanzaba también al contenedor y
   dejaba el nombre y el estado en la misma línea. */
.ventana-quien .enlinea{
  font-size:.75rem; opacity:.85; display:flex; align-items:center; gap:6px; margin-top:2px;
}
.ventana-quien .enlinea::before{
  content:''; width:7px; height:7px; border-radius:50%; background:#6EE7B7; flex:none;
}
.ventana-cuerpo{padding:20px; display:flex; flex-direction:column; gap:10px}
.ventana-cuerpo li{list-style:none}
.ventana-caja{
  display:flex; align-items:center; gap:10px; margin-top:6px; padding:11px 16px;
  border-top:1px solid var(--vx-borde); color:var(--vx-texto-suave); font-size:.875rem;
}
.ventana-caja .env{
  margin-left:auto; width:30px; height:30px; border-radius:50%; flex:none;
  background:var(--vx-acento); color:#fff; display:grid; place-items:center;
}
.sugerencias{display:flex; flex-wrap:wrap; gap:8px; padding:0 20px 18px}
.sugerencia{
  font-family:inherit; font-size:.8125rem; cursor:pointer;
  padding:7px 14px; border-radius:999px; text-decoration:none;
  background:var(--vx-fondo); border:1px solid var(--vx-borde); color:var(--vx-texto);
  transition:border-color .3s var(--vx-salida), color .3s var(--vx-salida);
}
.sugerencia:hover{border-color:var(--vx-acento); color:var(--vx-acento)}
.etiqueta{
  display:inline-block; padding:5px 12px; border-radius:999px;
  background:var(--vx-acento-tenue); color:var(--vx-acento);
  font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
h1{
  font-size:clamp(2.5rem,6.6vw,4.25rem); line-height:1.02; letter-spacing:-.04em;
  font-weight:700; margin:24px 0 0; max-width:17ch;
}
h1 em{font-style:normal; color:var(--vx-acento)}
.bajada{
  font-size:clamp(1.0625rem,2.2vw,1.25rem); color:var(--vx-texto-suave);
  margin:22px 0 0; max-width:52ch; line-height:1.55;
}
.acciones{display:flex; flex-wrap:wrap; gap:12px; margin:36px 0 0; align-items:center}

.boton{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  padding:13px 22px; border-radius:999px; border:1px solid transparent;
  font-family:inherit; font-size:.9375rem; font-weight:600; text-decoration:none;
  transition:transform .25s var(--vx-salida), box-shadow .35s var(--vx-salida),
             background .3s var(--vx-salida), border-color .3s var(--vx-salida);
}
.boton-primario{background:var(--vx-acento); color:#fff; box-shadow:var(--vx-sombra-2)}
.boton-primario:hover{background:var(--vx-acento-hondo); box-shadow:var(--vx-sombra-3); transform:translateY(-1px)}
.boton-secundario{background:var(--vx-superficie); color:var(--vx-texto); border-color:var(--vx-borde-fuerte)}
.boton-secundario:hover{border-color:var(--vx-acento); color:var(--vx-acento)}
.boton:active{transform:scale(.98)}
.boton:focus-visible{outline:2px solid var(--vx-acento); outline-offset:3px}
@media (prefers-reduced-motion:reduce){ .boton{transition:none} .boton:hover,.boton:active{transform:none} }

/* Punto de disponibilidad: el mismo signo que lleva la burbuja del chat en el sitio
   del cliente, para que el botón prometa exactamente lo que el visitante va a abrir. */
.pulso{width:8px; height:8px; border-radius:50%; background:#34D399; flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,#34D399 28%,transparent)}

.nota-pie{margin:18px 0 0; font-size:.8125rem; color:var(--vx-texto-suave)}

/* ── El hilo ────────────────────────────────────────────────────────────── */
.hilo{max-width:880px; margin:0 auto; padding-bottom:96px}
.turno{margin-top:72px; scroll-margin-top:88px}

/* Pregunta: burbuja del visitante, alineada a la derecha, con la esquina de anclaje
   marcada. Es la convención de cualquier chat y no hay motivo para reinventarla. */
.pregunta{
  margin-left:auto; max-width:34ch; padding:14px 20px;
  background:var(--vx-superficie); border:1px solid var(--vx-borde);
  border-radius:18px 18px 6px 18px; box-shadow:var(--vx-sombra-1);
  font-size:1.0625rem; font-weight:500;
}
.pregunta::before{
  content:'Tú'; display:block; font-size:.625rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--vx-texto-suave); font-weight:600; margin-bottom:5px;
}

/* Respuesta: campo azul a escala de región. Solo la frase que carga el argumento va
   sobre el color; el desarrollo baja al fondo neutro, porque un párrafo largo sobre
   saturado se lee peor y aquí el objetivo es que se lea. */
.respuesta{
  margin-top:18px; display:grid; grid-template-columns:38px minmax(0,1fr); gap:16px; align-items:start;
}
.agente{
  width:38px; height:38px; border-radius:12px; background:var(--vx-acento); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:15px; box-shadow:var(--vx-sombra-1);
}
.dicho{
  background:var(--vx-acento); color:#fff; border-radius:6px 18px 18px 18px;
  padding:22px 26px; box-shadow:var(--vx-sombra-2);
}
.dicho p{margin:0; font-size:clamp(1.125rem,2.2vw,1.375rem); line-height:1.4; letter-spacing:-.015em; font-weight:500}
.dicho p + p{margin-top:14px}
.dicho b{font-weight:700}
.detalle{margin:20px 0 0; padding-left:54px; color:var(--vx-texto-suave); max-width:60ch}
.detalle p{margin:0 0 14px}
.detalle p:last-child{margin-bottom:0}
.detalle strong{color:var(--vx-texto)}
@media (max-width:640px){
  .respuesta{grid-template-columns:1fr; gap:12px}
  .agente{display:none}
  .dicho{border-radius:18px}
  .detalle{padding-left:0}
}

/* ── Demostraciones ─────────────────────────────────────────────────────── */
.demo{
  margin:26px 0 0 54px; background:var(--vx-superficie);
  border:1px solid var(--vx-borde); border-radius:var(--vx-radio);
  box-shadow:var(--vx-sombra-2); overflow:hidden;
}
@media (max-width:640px){ .demo{margin-left:0} }
.demo-tit{
  display:flex; align-items:center; gap:8px; padding:11px 18px;
  border-bottom:1px solid var(--vx-borde); background:var(--vx-fondo);
  font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; color:var(--vx-texto-suave);
}
/* Toda demostración se marca como ejemplo. Datos que parecen reales sin serlo es lo
   único que una página así no puede permitirse. */
.demo-tit::after{
  content:'ejemplo'; margin-left:auto; text-transform:none; letter-spacing:0;
  font-weight:500; font-size:.6875rem; opacity:.75;
}
.demo-cuerpo{padding:20px 22px}

/* Cronología de lo que pasa al entrar un prospecto */
.linea{list-style:none; margin:0; padding:0}
.linea li{display:grid; grid-template-columns:66px minmax(0,1fr); gap:16px; padding:12px 0; align-items:start}
.linea li + li{border-top:1px solid var(--vx-borde)}
.reloj{
  font-family:var(--vx-fuente-mono); font-size:.8125rem; font-weight:600;
  color:var(--vx-acento); padding-top:2px;
}
.linea b{display:block; font-weight:600; font-size:.9375rem; margin-bottom:2px}
.linea span{font-size:.875rem; color:var(--vx-texto-suave)}

/* Banda de «se está enfriando», con la misma forma que en el CRM */
.banda{
  display:flex; gap:12px; align-items:flex-start; padding:14px 16px;
  background:var(--vx-aviso-tenue); border:1px solid var(--vx-aviso-borde);
  border-radius:var(--vx-radio-chico); font-size:.875rem;
}
.banda-glifo{color:var(--vx-aviso); font-weight:700; flex:none}
.banda b{display:block; color:var(--vx-aviso); margin-bottom:3px}
.filas{list-style:none; margin:14px 0 0; padding:0}
.filas li{
  display:flex; gap:12px; align-items:center; padding:11px 2px;
  border-top:1px solid var(--vx-borde); font-size:.875rem;
}
.marca-tipo{
  font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  padding:3px 8px; border-radius:999px; flex:none;
  background:var(--vx-acento-tenue); color:var(--vx-acento);
}
.marca-tipo.frio{background:var(--vx-aviso-tenue); color:var(--vx-aviso)}
.filas em{margin-left:auto; font-style:normal; color:var(--vx-texto-suave); font-size:.8125rem; flex:none}

/* Transcripción corta dentro de una demostración */
.mini{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.mini li{max-width:80%; padding:10px 14px; border-radius:14px; font-size:.9375rem; line-height:1.5}
.mini .de-el{background:var(--vx-fondo); border:1px solid var(--vx-borde); border-bottom-left-radius:5px}
.mini .de-tu{align-self:flex-end; background:var(--vx-acento); color:#fff; border-bottom-right-radius:5px}
.mini .nota{font-size:.75rem; color:var(--vx-texto-suave); max-width:none; padding:0; background:none; border:0}

/* Rejilla de puertas de entrada y de capacidades */
.rejilla{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); margin:26px 0 0 54px}
@media (max-width:640px){ .rejilla{margin-left:0} }
.ficha{
  padding:18px 20px; background:var(--vx-superficie); border:1px solid var(--vx-borde);
  border-radius:var(--vx-radio); box-shadow:var(--vx-sombra-1);
  transition:transform .4s var(--vx-salida), box-shadow .4s var(--vx-salida);
}
.ficha:hover{transform:translateY(-2px); box-shadow:var(--vx-sombra-2)}
.ficha b{display:block; font-size:.9375rem; font-weight:600; margin-bottom:5px}
.ficha span{font-size:.8125rem; color:var(--vx-texto-suave); line-height:1.5; display:block}
.ficha .aparte{
  display:inline-block; margin-top:9px; font-size:.6875rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--vx-aviso);
}

/* ── Cierre: el turno del visitante ─────────────────────────────────────── */
.cierre{
  margin:96px 0 0; padding:56px 0 88px; border-top:1px solid var(--vx-borde); text-align:center;
}
.cierre h2{
  font-size:clamp(1.75rem,4vw,2.5rem); line-height:1.1; letter-spacing:-.03em;
  font-weight:700; margin:0 0 14px;
}
.cierre p{color:var(--vx-texto-suave); margin:0 auto 30px; max-width:46ch}

/* Caja falsa del chat: invita con la forma exacta de lo que va a abrirse. Es un botón,
   no un input — un campo que no escribe donde parece es una promesa incumplida. */
.invita{
  display:flex; align-items:center; gap:14px; width:100%; max-width:520px; margin:0 auto;
  padding:14px 14px 14px 22px; cursor:pointer; text-align:left;
  background:var(--vx-superficie); border:1px solid var(--vx-borde-fuerte);
  border-radius:999px; box-shadow:var(--vx-sombra-2); font-family:inherit;
  color:var(--vx-texto-suave); font-size:1rem;
  transition:border-color .3s var(--vx-salida), box-shadow .35s var(--vx-salida);
}
.invita:hover{border-color:var(--vx-acento); box-shadow:var(--vx-sombra-3)}
.invita:focus-visible{outline:2px solid var(--vx-acento); outline-offset:3px}
.invita .env{
  margin-left:auto; width:38px; height:38px; border-radius:50%; flex:none;
  background:var(--vx-acento); color:#fff; display:grid; place-items:center;
  transition:transform .35s var(--vx-salida);
}
.invita:hover .env{transform:translateX(2px) scale(1.04)}

/* ── Pie ────────────────────────────────────────────────────────────────── */
.pie{border-top:1px solid var(--vx-borde); padding:36px 0 56px}
.pie-int{
  max-width:1180px; margin:0 auto; padding:0 28px;
  display:flex; flex-wrap:wrap; gap:18px 32px; align-items:center;
  font-size:.875rem; color:var(--vx-texto-suave);
}
.pie-int a{color:var(--vx-texto-suave); text-decoration:none}
.pie-int a:hover{color:var(--vx-acento)}
.pie-sep{flex:1}
@media (max-width:640px){ .pie-int{padding:0 18px} }