/* ═══════════════════════════════════════════════════════
   MOVEX — Capa de mejoras premium (enhance.css)
   Se carga DESPUÉS de styles.css. Solo agrega/eleva.
═══════════════════════════════════════════════════════ */

:root {
  --naranja: #FF6B35;          /* marca unificada */
  --naranja-2: #FF8C42;
  --morado: #9C6FFF;
  --glass: rgba(255,255,255,0.045);
  --glass-brd: rgba(255,255,255,0.09);
}

/* ── Selección y scrollbar ── */
::selection { background: rgba(255,107,53,0.35); color: #fff; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0A1628; }
::-webkit-scrollbar-thumb { background: linear-gradient(#1B3A6B, #FF6B35); border-radius: 10px; border: 2px solid #0A1628; }

/* ── Barra de progreso de scroll ── */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, #1B3A6B, #FF6B35 60%, #FF8C42);
  z-index: 2000; box-shadow: 0 0 12px rgba(255,107,53,0.6);
  transition: width 0.1s linear;
}

/* ══════════════════════════════════════════
   FONDO AURORA ANIMADO (encima del grid existente)
══════════════════════════════════════════ */
body::before {
  content: ''; position: fixed; inset: -20%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38% 42% at 18% 22%, rgba(27,58,107,0.55), transparent 60%),
    radial-gradient(34% 38% at 82% 30%, rgba(255,107,53,0.20), transparent 60%),
    radial-gradient(40% 44% at 65% 82%, rgba(156,111,255,0.16), transparent 60%),
    radial-gradient(30% 34% at 30% 78%, rgba(38,166,154,0.12), transparent 60%);
  filter: blur(60px);
  animation: auroraMove 24s ease-in-out infinite alternate;
}
@keyframes auroraMove {
  0%   { transform: translate3d(0,0,0) scale(1);   }
  50%  { transform: translate3d(3%, -2%, 0) scale(1.12); }
  100% { transform: translate3d(-3%, 3%, 0) scale(1.05); }
}
.hero-grid { animation: gridDrift 40s linear infinite; }
@keyframes gridDrift { to { background-position: 60px 60px; } }
.glow-1, .glow-2 { mix-blend-mode: screen; }

/* ══════════════════════════════════════════
   TEXTO GRADIENTE CON SHIMMER
══════════════════════════════════════════ */
.gradient-text {
  background: linear-gradient(100deg, #FF6B35 0%, #FF8C42 30%, #ffd0b0 50%, #FF8C42 70%, #FF6B35 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: 250% 0; } }

/* ══════════════════════════════════════════
   NAV — logo glow + subrayado activo
══════════════════════════════════════════ */
.navbar.scrolled { background: rgba(10,22,40,0.82); box-shadow: 0 1px 0 var(--borde), 0 12px 40px rgba(0,0,0,0.35); }
.logo-mark { filter: drop-shadow(0 0 10px rgba(255,107,53,0.35)); }
.nav-links a { position: relative; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: linear-gradient(90deg, #FF6B35, #FF8C42); border-radius: 2px;
  transition: width 0.28s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

/* ══════════════════════════════════════════
   BADGE / TAG con brillo
══════════════════════════════════════════ */
.section-tag { position: relative; box-shadow: 0 0 24px rgba(255,107,53,0.12); }
.hero-badge { box-shadow: 0 0 30px rgba(0,200,83,0.15); }

/* ══════════════════════════════════════════
   BOTONES — barrido de brillo
══════════════════════════════════════════ */
.btn-primary, .download-btn.android { position: relative; overflow: hidden; }
.btn-primary::after, .download-btn.android::after {
  content: ''; position: absolute; top: 0; left: -80%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-20deg);
  animation: shine 4.5s ease-in-out infinite;
}
@keyframes shine { 0%, 60% { left: -80%; } 90%, 100% { left: 140%; } }
.btn-primary { background: linear-gradient(135deg, #FF6B35, #FF8C42); }

/* ══════════════════════════════════════════
   TARJETAS — glass + borde gradiente + glow al hover
══════════════════════════════════════════ */
.service-card, .step-card, .sec-feat, .indriver-note, .download-inner, .sec-card {
  background: var(--glass);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-color: var(--glass-brd);
  position: relative;
}
.service-card::before, .step-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(255,107,53,0.5), transparent 40%, transparent 60%, rgba(27,58,107,0.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.35s;
  pointer-events: none;
}
.service-card:hover::before, .step-card:hover::before { opacity: 1; }
.service-card:hover, .step-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 60px rgba(0,0,0,0.5), 0 0 40px rgba(255,107,53,0.12);
}
.card-featured { background: linear-gradient(135deg, rgba(255,107,53,0.12) 0%, var(--glass) 60%); }
.service-icon { transition: transform 0.35s; }
.service-card:hover .service-icon { transform: scale(1.12) rotate(-4deg); }

/* Íconos de "cómo funciona" con rebote sutil */
.step-icon { display: inline-block; transition: transform 0.35s; }
.step-card:hover .step-icon { transform: translateY(-4px) scale(1.15); }

/* ══════════════════════════════════════════
   REVEAL — con escala + desenfoque
══════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(46px) scale(0.98); filter: blur(4px); transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1), filter 0.7s; }
.reveal.visible { opacity: 1; transform: none; filter: none; }

/* ══════════════════════════════════════════
   HERO PHONE — anillo de luz + reflejo + demo
══════════════════════════════════════════ */
.hero-phone { position: relative; }
.hero-phone::before {
  content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,107,53,0.28), transparent 65%);
  top: 50%; left: 50%; transform: translate(-50%,-50%); filter: blur(30px);
  z-index: -1; animation: glowPulse 5s ease-in-out infinite;
}
.phone-mockup {
  background: linear-gradient(160deg, #232f3d, #141c26);
  box-shadow: 0 50px 120px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.12), 0 0 0 1px rgba(255,107,53,0.1);
}
.phone-screen { position: relative; }
.phone-screen::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
  pointer-events: none;
}
.phone-search { transition: color 0.2s, border-color 0.3s; }
.phone-search.typing { color: #fff; border-color: rgba(255,107,53,0.6); box-shadow: 0 0 0 3px rgba(255,107,53,0.12); }
/* ── Ruta curva animada del teléfono ── */
.phone-map-placeholder { position: relative; }
.ph-route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ph-route path { fill: none; stroke-linecap: round; }
.ph-route .bg { stroke: rgba(255,255,255,0.08); stroke-width: 3; }
.ph-route .fg {
  stroke: url(#phGrad); stroke-width: 3;
  stroke-dasharray: 240; stroke-dashoffset: 240;
  filter: drop-shadow(0 0 4px rgba(255,107,53,0.5));
}
.ph-route .fg.draw { animation: routeDraw 1.2s ease forwards; }
@keyframes routeDraw { to { stroke-dashoffset: 0; } }
.map-dot.origin, .map-dot.dest {
  opacity: 0; transform: translateX(-50%) scale(0); left: 50%;
  transition: opacity 0.3s, transform 0.45s cubic-bezier(.34,1.56,.64,1);
  z-index: 2;
}
.map-dot.show { opacity: 1; transform: translateX(-50%) scale(1); }
.phone-offer-card { transition: opacity 0.4s, transform 0.4s; }
.phone-offer-card.enter { animation: popIn 0.5s cubic-bezier(.34,1.56,.64,1); }
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
.offer-price { font-variant-numeric: tabular-nums; }

/* El carrito recorre la ruta curva con brillo y giro */
.map-car {
  position: absolute; left: 50%; top: 24%; z-index: 3;
  width: 22px; height: 22px; opacity: 0;
  color: #FF8C42;
  filter: drop-shadow(0 0 6px rgba(255,107,53,0.7));
  transform: translate(-50%,-50%);
}
.map-car svg { width: 22px; height: 22px; display: block; }
.map-car.run { animation: carPath 1.25s cubic-bezier(.45,.05,.55,.95) forwards; }
@keyframes carPath {
  0%   { top: 24%; left: 50%; opacity: 0; transform: translate(-50%,-50%) rotate(10deg) scale(0.8); }
  12%  { opacity: 1; }
  40%  { top: 46%; left: 32%; transform: translate(-50%,-50%) rotate(-18deg) scale(1.05); }
  72%  { top: 66%; left: 68%; transform: translate(-50%,-50%) rotate(16deg) scale(1.05); }
  100% { top: 80%; left: 50%; opacity: 1; transform: translate(-50%,-50%) rotate(3deg) scale(0.95); }
}

/* ══════════════════════════════════════════
   ICONOS DE LÍNEA (reemplazan los emoji)
══════════════════════════════════════════ */
.ico { width: 24px; height: 24px; fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ico-sm { width: 16px; height: 16px; }
.service-icon .ico { width: 30px; height: 30px; }

/* Badge de "cómo funciona" */
.step-icon {
  width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 17px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(255,107,53,0.16), rgba(27,58,107,0.24));
  border: 1px solid rgba(255,107,53,0.24); color: #FF8C42;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.step-icon .ico { width: 27px; height: 27px; }

/* Feature de seguridad */
.sec-icon {
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,107,53,0.1); border: 1px solid rgba(255,107,53,0.2);
  color: #FF8C42;
}
.sec-icon .ico { width: 23px; height: 23px; }

/* Íconos en tarjetas de seguridad flotantes */
.sc-icon .ico { width: 22px; height: 22px; }
.sc-icon.red { color: #EF5350; }
.sc-icon.green { color: #00C853; }
.sc-icon.orange { color: #FF6B35; }

/* Ícono del modelo InDrive */
.indriver-icon {
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,107,53,0.12); border: 1px solid rgba(255,107,53,0.25); color: #FF8C42;
}
.indriver-icon .ico { width: 26px; height: 26px; }

/* Ícono de tarifa */
.tarifa-ico {
  width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
}
.tarifa-ico .ico { width: 26px; height: 26px; }

/* Íconos en los contadores en vivo */
.hls-label .ico-sm { display: inline-block; vertical-align: -2px; margin-right: 3px; opacity: 0.8; }

/* ══════════════════════════════════════════
   SEGURIDAD — tarjetas flotantes con glow lateral
══════════════════════════════════════════ */
.sec-card { backdrop-filter: blur(12px); }
.sc1 { box-shadow: var(--shadow), -8px 0 30px rgba(229,57,53,0.18); }
.sc2 { box-shadow: var(--shadow), -8px 0 30px rgba(0,200,83,0.18); }
.sc3 { box-shadow: var(--shadow), -8px 0 30px rgba(255,107,53,0.18); }

/* ══════════════════════════════════════════
   DESCARGA — glow que respira
══════════════════════════════════════════ */
.download-glow { animation: glowPulse 7s ease-in-out infinite; }
.download-inner { border-color: rgba(255,107,53,0.14); }

/* ── Contadores en vivo: número con glow ── */
.hls-num { text-shadow: 0 0 18px rgba(255,107,53,0.35); }
.hls-users { text-shadow: 0 0 18px rgba(156,111,255,0.4); }

/* ══════════════════════════════════════════
   ACCESIBILIDAD — respeta reduce-motion
══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ══════════════════════════════════════════
   MÓVIL — refinamientos de la landing
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .servicios, .como-funciona, .seguridad, .descargar { padding: 66px 0; }
  .tarifas { padding: 58px 0 !important; }
  .section-header { margin-bottom: 40px; }
  .hero { padding: 92px 20px 48px; min-height: auto; }
  .hero-subtitle { margin-bottom: 26px; }
  .hero-actions { margin-bottom: 26px; }
  .hero-actions .btn-primary, .hero-actions .btn-secondary { flex: 1 1 auto; justify-content: center; }
  .hero-live-stats { width: 100%; justify-content: center; }
  .indriver-note { flex-direction: column; text-align: center; align-items: center; gap: 14px; }
  .indriver-icon { margin: 0 auto; }
  .download-inner { padding: 44px 22px; }
  .footer-bottom { justify-content: center; text-align: center; }
}
@media (max-width: 420px) {
  .hero-title { font-size: 34px; letter-spacing: -0.5px; }
  .hls-item { padding: 10px 12px; }
  .hls-num { font-size: 17px; }
  .service-card, .step-card { padding: 26px 22px; }
  .nav-container { padding: 0 16px; }
}

/* ══════════════════════════════════════════
   MÓVIL — correcciones estructurales
   (teléfono visible, tarjetas de seguridad sin encimar,
    flecha de scroll funcional)
══════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* El teléfono y su animación SÍ se muestran en móvil, centrados bajo el texto */
  .hero-phone { display: flex !important; margin: 8px auto 0; }
}
@media (max-width: 768px) {
  /* Nav: el ☰ se va a la derecha (el menú que lo empujaba está oculto en móvil) */
  .nav-actions { margin-left: auto; }

  /* 3 pasos: tarjetas centradas y a todo el ancho (no pegadas a la izquierda) */
  .steps-grid { align-items: center !important; }
  .step-card { max-width: 100% !important; width: 100%; }

  /* Escalar el teléfono para que quepa cómodo en pantallas pequeñas */
  .hero-phone { transform: scale(0.9); transform-origin: top center; margin-bottom: -30px; }

  /* Tarjetas de seguridad: en móvil se apilan en flujo normal, sin position:absolute */
  .security-card-stack {
    position: static; width: 100%; height: auto;
    display: flex; flex-direction: column; gap: 14px;
  }
  .sec-card { position: static; left: auto; right: auto; animation: none !important; }
  .sc1, .sc2, .sc3 { top: auto; }

  /* La flecha de scroll ahora es un botón real */
  .hero-scroll-hint { cursor: pointer; }
}
@media (max-width: 400px) {
  .hero-phone { transform: scale(0.82); margin-bottom: -50px; }
}