/* ===========================================================
   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: tarjetas flotantes dentro del viewport (no recortadas) */
  .hero-badge-tr { right: 4px !important; top: 8px !important; }
  .hero-badge-bl { left: 4px !important; bottom: 6px !important; }
}

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