/* VizitIA Landing — custom.css
   Tailwind cubre el 95%. Aquí solo extras: patrones, animaciones y mockup. */

:root {
  --brand: #2563eb;
  --brand-dark: #1e40af;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Patrón de rejilla sutil para hero */
.bg-grid {
  background-image:
    linear-gradient(to right, rgba(37,99,235,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(37,99,235,.08) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black 60%, transparent 100%);
}

/* Blobs */
.blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(70px);
  opacity: .35;
  pointer-events: none;
}

/* Mockup dashboard */
.mockup-shell {
  box-shadow: 0 25px 60px -15px rgba(37, 99, 235, .25), 0 12px 24px -12px rgba(15, 23, 42, .18);
  border: 1px solid #e2e8f0;
}
.mockup-dot { width: 11px; height: 11px; border-radius: 9999px; }

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* Float suave */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.floaty { animation: floaty 5s ease-in-out infinite; }
.floaty-delay { animation: floaty 6s ease-in-out 1s infinite; }

/* Badge pulso */
@keyframes ping-soft {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
  70% { box-shadow: 0 0 0 9px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.pulse-dot { animation: ping-soft 1.8s ease-out infinite; }

/* Pulso del marcador en el mapa simulado */
@keyframes map-pulse {
  0% { transform: scale(.45); opacity: .4; }
  100% { transform: scale(1.25); opacity: 0; }
}
.map-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: map-pulse 2.2s ease-out infinite;
}

/* Tarjetas */
.card-hover { transition: transform .25s ease, box-shadow .25s ease; }
.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px -18px rgba(15,23,42,.22);
}

/* FAQ */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-answer > div { overflow: hidden; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform .3s ease; }

/* Ticker de estados */
@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-track {
  display: flex;
  gap: 2.5rem;
  width: max-content;
  animation: ticker 28s linear infinite;
}

/* Navbar con sombra al hacer scroll */
#navbar.scrolled {
  box-shadow: 0 8px 24px -12px rgba(15,23,42,.18);
  background: rgba(255,255,255,.92);
}

@media (prefers-reduced-motion: reduce) {
  .floaty, .floaty-delay, .ticker-track, .map-pulse { animation: none; }
  .reveal { opacity: 1; transform: none; }
}