/* ============================================================
   Running Analysis · Landing styles (tema claro)
   Complementa a Tailwind (CDN) con utilidades y efectos propios.
   Paleta de marca: azul #2b7fff → #0a4fc4 · acento #ff8a3d
   ============================================================ */

:root {
  --brand-500: #2b7fff;
  --brand-700: #0a4fc4;
  --accent-500: #ff8a3d;
  --accent-600: #f06f14;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
}

/* ---------- Botón con degradado de marca ---------- */
.btn-gradient {
  background-image: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn-gradient:hover {
  filter: brightness(1.12);
  box-shadow: 0 10px 32px -8px rgba(43, 127, 255, 0.55);
}

.btn-gradient:active {
  transform: translateY(1px);
}

/* ---------- Fondo con retícula suave para el hero claro ---------- */
.bg-grid {
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 20%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 20%, black 40%, transparent 100%);
}

/* ---------- Texto con degradado (frases destacadas) ---------- */
.gradient-text {
  background-image: linear-gradient(120deg, var(--brand-700) 0%, var(--brand-500) 45%, var(--accent-600) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Navbar: fondo translúcido con sombra al hacer scroll ---------- */
#navbar.scrolled {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 8px 30px -12px rgba(15, 23, 42, 0.15);
}

/* ---------- Animación de dibujado de la gráfica del hero ---------- */
.chart-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

#hero-mockup.visible .chart-line {
  animation: draw-line 1.8s ease-out 0.4s forwards;
}

.chart-line.is-dashed {
  animation-delay: 0.9s;
}

@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

/* ---------- Aparición al hacer scroll (IntersectionObserver) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .float-anim,
  .chart-line {
    transition: none;
    animation: none;
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
  }
}

/* ---------- Flotación suave de la tarjeta de insight ---------- */
.float-anim {
  animation: float 5s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ---------- FAQ: acordeón basado en <details> ---------- */
.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item[open] {
  border-color: rgba(43, 127, 255, 0.4);
  box-shadow: 0 10px 30px -12px rgba(43, 127, 255, 0.25);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
  color: var(--brand-500);
}

.faq-item[open] .faq-chevron {
  transition: transform 0.25s ease;
}

/* ---------- Pricing: destacado del botón activo del toggle ---------- */
#btn-monthly.active,
#btn-yearly.active {
  background-image: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(43, 127, 255, 0.6);
}