html{ scroll-behavior:smooth; scroll-padding-top:90px; }
body{ font-family:'Manrope',sans-serif; -webkit-font-smoothing:antialiased; }
::selection{ background:#1F6FEB; color:#fff; }

/* fondo del hero (sustituir por foto stock real: autovía / camión en ruta) */
.hero-photo{
  background-color:#0F223B;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 13px,transparent 13px,transparent 26px);
}

/* ====== CAPA DE ANIMACIÓN ====== */
.speed-lines{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.speed-lines span{ position:absolute; height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(79,141,240,0),rgba(79,141,240,.65),transparent);
  animation:dash linear infinite; opacity:.7; }
@keyframes dash{ 0%{ transform:translateX(-30%);} 100%{ transform:translateX(130vw);} }

.glow{ position:absolute; border-radius:9999px; filter:blur(70px); opacity:.5; animation:floaty 9s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) scale(1);} 50%{ transform:translateY(-24px) scale(1.08);} }

.diag-sweep{ position:absolute; top:0; bottom:0; width:48%;
  background:linear-gradient(115deg,transparent 0,rgba(79,141,240,.10) 45%,rgba(79,141,240,.18) 50%,transparent 55%);
  transform:skewX(-12deg); animation:sweep 7s ease-in-out infinite; }
@keyframes sweep{ 0%{ left:-60%;} 55%,100%{ left:120%;} }

.word{ display:inline-block; opacity:0; transform:translateY(22px) rotate(2deg); animation:wordIn .7s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes wordIn{ to{ opacity:1; transform:none; } }

.reveal{ opacity:1; transform:none; }
@media (prefers-reduced-motion:no-preference){
  .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
  .reveal.in{ opacity:1; transform:none; }
}

.route-dash{ stroke-dasharray:8 10; animation:flow 1.1s linear infinite; }
@keyframes flow{ to{ stroke-dashoffset:-36; } }

.marquee{ display:flex; gap:3rem; width:max-content; animation:scrollx 22s linear infinite; }
@keyframes scrollx{ to{ transform:translateX(-50%);} }

.pulse{ animation:pulse 2.2s ease-out infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(31,111,235,.5);} 70%{ box-shadow:0 0 0 16px rgba(31,111,235,0);} 100%{ box-shadow:0 0 0 0 rgba(31,111,235,0);} }

.card-hover{ transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.card-hover:hover{ transform:translateY(-8px); box-shadow:0 22px 48px -22px rgba(15,34,59,.55); }

@media (prefers-reduced-motion:reduce){
  .speed-lines,.glow,.diag-sweep,.marquee,.pulse,.route-dash{ animation:none !important; }
  .word{ opacity:1; transform:none; animation:none; }
}
[data-lucide]{ width:1em; height:1em; }