/* =========================================================
   FleTrack — capa "Apple / SaaS"
   1) Accesibilidad  2) Cristal solo en la capa funcional
   3) Movimiento con propósito  4) Panel en vivo del hero
   Se carga después de styles.css, pages.css y saas.css.
   ========================================================= */

:root {
  --muted: #636a75;            /* antes #7a7a7a (4.29:1) → 5.6:1 sobre blanco */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --glass-fill: rgba(250, 251, 253, .72);
  --glass-edge: rgba(255, 255, 255, .7);
}

/* ---------- 1) Accesibilidad ---------- */

/* Texto chico más legible */
.eyebrow { font-size: 12.5px; font-weight: 500; letter-spacing: .14em; }
.pill__tag, .pill__text { font-size: 13px; letter-spacing: -.02em; }
.tag { font-size: 12.5px; letter-spacing: -.02em; }

/* Contraste de "no incluye" en planes: el ícono ✕ ya marca el estado */
.plan__list li.off { color: #6b7280; }                        /* 4.83:1 */
.plan--featured .plan__list li.off { color: rgba(255, 255, 255, .6); }  /* ~7:1 */

/* Foco visible y consistente */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 10px; }
.dark :focus-visible, .plan--featured :focus-visible, .custom-plan :focus-visible, .footer :focus-visible { outline-color: var(--accent); }

/* Elementos táctiles de al menos 44 px en móvil */
@media (max-width: 767px) {
  .btn { min-height: 44px; }
  .nav__toggle { width: 44px; height: 44px; }
  .social a { width: 44px; height: 44px; }
  .fcol li a { display: inline-flex; align-items: center; min-height: 44px; }
  .chip { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 12px; }
  .plan__more summary { min-height: 44px; }
  .mobile-menu:not(.mnav) > a, .mobile-menu:not(.mnav) summary, .mobile-menu:not(.mnav) details a { min-height: 44px; display: flex; align-items: center; }
  .nav__logo, .prod-card__body h3 a, .channel a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- 2) Cristal: solo en lo que flota sobre el contenido ---------- */

/* Pills dentro del contenido: material normal, sin desenfoque */
main .pill.glass {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: rgba(255, 255, 255, .55);
  border-color: rgba(255, 255, 255, .8);
  box-shadow: 0 1px 2px rgba(17, 19, 22, .05);
}

/* Menú, mega menús y menú móvil: cristal "regular" */
.nav.glass, .mega__panel.glass, .mobile-menu.glass {
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 12px 40px -18px rgba(17, 19, 22, .25);
}
.site-header.is-scrolled .nav { background: rgba(250, 251, 253, .82); }

/* Borde de scroll: el contenido se desvanece bajo el menú en lugar de chocar con él */
.site-header::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 120px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(248, 249, 251, .7) 0%, rgba(248, 249, 251, 0) 100%);
  opacity: 0; transition: opacity .3s ease;
}
.site-header.is-scrolled::before { opacity: 1; }

/* Reducir transparencia → superficies opacas */
@media (prefers-reduced-transparency: reduce) {
  .nav.glass, .mega__panel.glass, .mobile-menu.glass, .site-header.is-scrolled .nav, main .pill.glass {
    -webkit-backdrop-filter: none; backdrop-filter: none; background: #f8f9fb;
  }
  .site-header::before { display: none; }
}

/* Aumentar contraste → bordes y textos más marcados */
@media (prefers-contrast: more) {
  :root { --muted: #3f454e; --ink-2: #2b3038; }
  .nav.glass, .mega__panel.glass, .mobile-menu.glass { background: #fff; border-color: #111316; }
  .prod-card, .plan, .fbox, .cbox, .hw, .mbox, .pbox { border: 1px solid #111316; }
  .feature { border-color: rgba(255, 255, 255, .6) !important; }
  .feature__txt, .dark .lead { color: #fff; }
}

/* ---------- 3) Movimiento ---------- */

/* Títulos principales: las palabras suben y se enfocan en secuencia */
.hero__title .w, .phero__title .w {
  display: inline-block;
  animation: word-in .9s var(--ease-out) both;
  animation-delay: calc(var(--i) * 70ms + 120ms);
}
@keyframes word-in {
  from { opacity: 0; transform: translateY(.45em); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.hero .pill, .hero__lead, .hero .btn-row, .phero__inner .pill {
  animation: fade-up .8s var(--ease-out) both;
}
.hero .pill, .phero__inner .pill { animation-delay: 0s; }
.hero__lead { animation-delay: .55s; }
.hero .btn-row { animation-delay: .7s; }
.hero__media { animation: media-in 1.1s var(--ease-out) .5s both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes media-in { from { opacity: 0; transform: translateY(28px) scale(.985); } to { opacity: 1; transform: none; } }

/* Entradas al hacer scroll (main.js marca [data-reveal] solo debajo del pliegue) */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(var(--ri, 0) * 80ms); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* Reducir movimiento → todo aparece sin desplazamiento */
@media (prefers-reduced-motion: reduce) {
  .hero__title .w, .phero__title .w, .hero .pill, .hero__lead, .hero .btn-row, .phero__inner .pill, .hero__media { animation: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .live__route { animation: none !important; stroke-dashoffset: 0 !important; }
  .live__car { animation: none !important; offset-distance: 58% !important; }
  .live__status i { animation: none !important; }
}

/* ---------- 4) Panel en vivo del hero ---------- */
.hero__media { position: relative; overflow: hidden; border-radius: 32px; border: 1px solid rgba(17, 19, 22, .06); box-shadow: 0 40px 80px -40px rgba(17, 19, 22, .35); background: #eef1f6; }
.hero__media[style*="--slot-img"] .live { display: none; }     /* si se sube una foto desde el panel, la foto manda */
.live { position: absolute; inset: 0; }
.live__map { position: absolute; inset: 0; width: 100%; height: 100%; }
.live__route { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: route-draw 2.4s var(--ease-out) 1s forwards; }
@keyframes route-draw { to { stroke-dashoffset: 0; } }
.live__car {
  offset-path: path("M140 470 C 300 470 330 330 470 320 S 690 220 780 250 S 980 160 1070 120");
  offset-rotate: 0deg; offset-distance: 0%;
  animation: drive 14s linear 1.6s infinite;
}
@keyframes drive { 0% { offset-distance: 0%; } 85%, 100% { offset-distance: 100%; } }

.live__card {
  position: absolute; z-index: 1;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(17, 19, 22, .06);
  border-radius: 20px; padding: 18px 20px;
  box-shadow: 0 20px 40px -20px rgba(17, 19, 22, .3);
  animation: fade-up .9s var(--ease-out) both;
}
.live__card small { display: block; font-size: 12.5px; color: var(--ink-2); }
.live__card b { font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.live__card--unit { left: 32px; bottom: 32px; width: min(420px, calc(100% - 64px)); animation-delay: 1.2s; }
.live__card--fuel { right: 32px; top: 32px; width: 200px; animation-delay: 1.4s; }
.live__card--fuel b { display: block; margin-top: 2px; font-size: 28px; }
.live__card--alert { right: 32px; bottom: 32px; display: flex; gap: 12px; align-items: center; max-width: 320px; animation-delay: 1.6s; }
.live__card--alert b { display: block; font-size: 14.5px; }
.live__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.live__status { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 999px; background: #e8f8dc; color: #2f6f12; font-size: 12.5px; font-weight: 600; }
.live__status i { width: 7px; height: 7px; border-radius: 50%; background: #3fa316; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px rgba(63, 163, 22, .18); } }
.live__muted { font-size: 13px; color: var(--ink-2); }
.live__title { margin-top: 12px; font-size: 20px; font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
.live__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.live__stats b { display: block; margin-top: 2px; font-size: 15px; }
.live__bar { display: block; height: 6px; margin-top: 12px; border-radius: 99px; background: #eef0f3; overflow: hidden; }
.live__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #111316, #4a4f58); }
.live__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 14px; background: var(--accent); }
.live__icon svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1024px) {
  .live__card--alert { display: none; }
}
@media (max-width: 767px) {
  .hero__media { border-radius: 24px; }
  .live__card--fuel { display: none; }
  .live__card--unit { left: 16px; right: 16px; bottom: 16px; width: auto; padding: 14px 16px; }
  .live__stats { grid-template-columns: repeat(2, 1fr); }
  .live__stats > div:last-child { display: none; }
  .live__title { font-size: 17px; }
}