/* ===== Base ===== */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ===== Navbar ===== */
.nav-bar { transition: box-shadow .3s ease; }
.nav-bar.scrolled { box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.nav-link { position: relative; text-decoration: none; transition: color .25s ease; }
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px;
  background: #dc2626; transition: width .3s ease;
}
.nav-link:hover { color: #fff; }
.nav-link:hover::after { width: 100%; }

.icon-btn { transition: transform .3s ease, border-color .3s ease, color .3s ease; }
.icon-btn:hover { transform: translateY(-3px); border-color: #dc2626; color: #dc2626; }

.btn-primary { transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, filter .3s ease; }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 26px rgba(220,38,38,.35); filter: brightness(1.08); }
.btn-primary:active { transform: translateY(-1px) scale(.98); }

/* ===== Hero ===== */
.hero-section {
  position: relative;
  background-image: url('Imagenes/Fondo.png');
  background-size: cover;
  background-position: center 30%;
}
.hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(3,7,18,.94) 0%, rgba(3,7,18,.75) 42%, rgba(3,7,18,.35) 75%, rgba(3,7,18,.15) 100%),
              linear-gradient(0deg, rgba(3,7,18,.85) 0%, rgba(3,7,18,.1) 35%),
              radial-gradient(600px circle at 80% 20%, rgba(220,38,38,.12), transparent 60%);
  animation: glowPulse 8s ease-in-out infinite;
}
@keyframes glowPulse { 0%,100% { opacity: .7; } 50% { opacity: 1; } }

.headline-accent { display: inline-block; position: relative; }
.headline-accent::after {
  content: ''; position: absolute; left: 0; bottom: 2px; width: 100%; height: 10px;
  background: rgba(220,38,38,.18); z-index: -1; transform: scaleX(0); transform-origin: left;
  animation: underlineGrow 1s .6s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes underlineGrow { to { transform: scaleX(1); } }

.search-bar input { transition: box-shadow .3s ease; }
.search-bar:focus-within input { box-shadow: 0 0 0 3px rgba(220,38,38,.25); }

.hero-bike { transition: transform .3s ease; will-change: transform; }
.hero-bike-ring {
  position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(239,68,68,.35);
  animation: ringSpin 16s linear infinite;
}
.hero-bike-ring::before {
  content: ''; position: absolute; inset: -1px; border-radius: 50%;
  border-top: 1px solid rgba(239,68,68,.7);
}
@keyframes ringSpin { to { transform: rotate(360deg); } }

/* ===== Reveal on scroll ===== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ===== Comparador ===== */
.compare-card { transition: box-shadow .4s ease; }
.clear-btn { transition: transform .2s ease, opacity .2s ease; }
.clear-btn:hover { transform: translateX(-2px); opacity: .75; }

.moto-pick { transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.moto-pick:hover { border-color: rgba(220,38,38,.35); box-shadow: 0 14px 28px rgba(15,23,42,.08); transform: translateY(-3px); }
.moto-thumb { transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.moto-pick:hover .moto-thumb { transform: scale(1.06) rotate(-2deg); }
.moto-thumb.swap { animation: swapPop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes swapPop { 0% { transform: scale(.6) rotate(8deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }

.vs-badge { animation: vsPulse 2.6s ease-in-out infinite; }
@keyframes vsPulse {
  0%,100% { box-shadow: 0 8px 20px rgba(220,38,38,0); }
  50% { box-shadow: 0 8px 24px rgba(220,38,38,.35); }
}

.stat-row { transition: background .25s ease; border-radius: 8px; }
.stat-row:hover { background: #fafafa; }
.stat-row span[id] { transition: color .3s ease, transform .3s ease; }
.stat-row span[id].updated { animation: statFlash .5s ease; }
@keyframes statFlash { 0% { transform: scale(1.15); } 100% { transform: scale(1); } }

.ver-ficha-btn, .ver-comp-btn { transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease; }
.ver-ficha-btn:hover, .ver-comp-btn:hover { background: #0f172a; color: #fff; border-color: #0f172a; transform: translateY(-2px); }

/* ===== Carousels ===== */
.carousel-track { scroll-behavior: smooth; }
.carousel-btn { transition: background .25s ease, color .25s ease, transform .2s ease, border-color .25s ease; }
.carousel-btn:hover { background: #dc2626; color: #fff; border-color: #dc2626; transform: scale(1.08); }
.carousel-btn:active { transform: scale(.94); }

.brand-card { transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, border-color .3s ease; cursor: pointer; }
.brand-card:hover { transform: translateY(-5px); box-shadow: 0 14px 26px rgba(15,23,42,.1); border-color: rgba(220,38,38,.3); }

.moto-card { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease; }
.moto-card:hover { transform: translateY(-6px); box-shadow: 0 20px 36px rgba(15,23,42,.12); border-color: rgba(220,38,38,.25); }
.moto-card-thumb { transition: transform .5s ease; }
.moto-card:hover .moto-card-thumb { transform: scale(1.08); }

/* ===== Stats band ===== */
.stats-band { position: relative; overflow: hidden; }
.stats-band::before {
  content: ''; position: absolute; top: -50%; right: -10%; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(220,38,38,.25), transparent 70%);
}

/* ===== CTA cards ===== */
.cta-card { transition: transform .35s ease, box-shadow .35s ease; }
.cta-card:hover { transform: translateY(-5px); box-shadow: 0 20px 36px rgba(15,23,42,.12); }
.cta-icon { transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.cta-card:hover .cta-icon { transform: scale(1.15) rotate(-6deg); }

.link-underline { position: relative; text-decoration: none; }
.link-underline::after {
  content: ''; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .3s ease;
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }