/* ===========================================================
   Lilab — IA operativa para empresas
   Estilos base. La interacción de :hover / :focus se maneja
   con un helper JS (data-hover / data-focus) para preservar
   fielmente los estilos inline del diseño original.
   =========================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #07080F;
  color: #F3F4FA;
  font-family: "Manrope", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(142,156,255,.25); }

img { max-width: 100%; }
button { font-family: inherit; }

/* ----------------------- Animaciones ----------------------- */
@keyframes floaty   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes floaty2  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@keyframes pulseDot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }
@keyframes flowdot  { 0% { top: -6px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 40px; opacity: 0; } }
@keyframes shimmer  { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes glowpulse{ 0%,100% { opacity: .5; } 50% { opacity: .9; } }
@keyframes typedot  { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }
@keyframes spinslow { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

/* Transición suave para los estados hover aplicados por JS */
[data-hover] { transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease, gap .2s ease, box-shadow .2s ease; }

/* ----------------------- Scrollbar del chat ----------------------- */
.chat-scroll::-webkit-scrollbar { width: 8px; }
.chat-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 999px; }

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 1080px) {
  .nav-links { display: none !important; }
  .hero { grid-template-columns: 1fr !important; gap: 40px !important; }
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-2 { grid-template-columns: 1fr !important; }
  .product-row { grid-template-columns: 1fr !important; gap: 24px !important; }
  .steps-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .start-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .advisor-intro { grid-template-columns: 1fr !important; gap: 32px !important; }
  /* minmax(0,1fr) evita que el track crezca al min-content de inputs y se desborde */
  .gate-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .demo-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .demo-left { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; }
}

@media (max-width: 680px) {
  .grid-3 { grid-template-columns: 1fr !important; }
  .steps-grid { grid-template-columns: 1fr !important; }
  .start-grid { grid-template-columns: 1fr !important; }
  .q-options { grid-template-columns: 1fr !important; }
  h1.hero-title { font-size: 38px !important; }
  .section-h2 { font-size: 30px !important; }
  .pad-x { padding-left: 20px !important; padding-right: 20px !important; }

  /* Gate: fila Nombre/Empresa a 1 columna y campos que sí encogen */
  .gate-form-row { grid-template-columns: 1fr !important; }
  #gate input, #gate select { width: 100%; min-width: 0; max-width: 100%; }

  /* Hero: ocultar badges flotantes en móvil (se solapan con el showcase) */
  .hero-badge-tr, .hero-badge-bl { display: none !important; }
}

/* min-width:0 permite que los hijos de grid/flex se encojan en vez de desbordar */
.gate-grid, .gate-grid > * { min-width: 0; }

/* ===========================================================
   Showcase rotativo del hero (.lsw-*)
   =========================================================== */
.lsw { width: 100%; border: 1px solid rgba(255,255,255,.1); border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  padding: 20px 20px 16px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); }
.lsw-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.lsw-id { display: flex; align-items: center; gap: 8px; }
.lsw-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px var(--acc); animation: pulseDot 2s infinite; }
.lsw-kicker { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8A8CA0; font-weight: 600; }
.lsw-wd { display: flex; gap: 5px; }
.lsw-wd span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.18); }
.lsw-titles { margin-bottom: 12px; }
.lsw-title { font-family: 'Sora'; font-weight: 700; font-size: 19px; letter-spacing: -.01em; }
.lsw-sub { font-size: 13px; color: #9092A6; margin-top: 3px; }
.lsw-stage { position: relative; height: 300px; border-radius: 14px; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, rgba(142,156,255,.06), rgba(7,8,15,.4)); border: 1px solid rgba(255,255,255,.06); }
.lsw-canvas { width: 100%; height: 100%; display: block; }
.lsw-tabs { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.lsw-tab { position: relative; flex: 1 1 auto; min-width: 84px; cursor: pointer; border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.025); color: #9092A6; font-family: 'Manrope'; font-size: 11.5px; font-weight: 600;
  padding: 9px 8px 8px; border-radius: 10px; overflow: hidden; transition: color .2s, border-color .2s; }
.lsw-tab:hover { color: #fff; border-color: rgba(142,156,255,.35); }
.lsw-tab.active { color: #fff; border-color: rgba(142,156,255,.5); background: rgba(142,156,255,.08); }
.lsw-lbl { position: relative; z-index: 1; }
.lsw-prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--acc), var(--glow)); }
@media (max-width: 520px) { .lsw-stage { height: 260px; } .lsw-tab .lsw-lbl { font-size: 10.5px; } }