/* =========================================================
   KnoxTrack — Design System
   Style: Tech Signal (dark, glass surfaces, bento grid)
   Fonts: Inter (single family, display + body)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  /* Color tokens */
  --bg: #070b14;
  --bg-soft: #0b1120;
  --surface: rgba(255,255,255,0.045);
  --surface-strong: rgba(255,255,255,0.07);
  --border: rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.16);

  --text: #f3f6fb;
  --text-muted: #a6b0c3;
  --text-faint: #6c7891;

  --signal: #fa1e4e;      /* primary — brand red (matches logo) */
  --signal-dim: rgba(250,30,78,0.14);
  --route: #4c7dff;       /* secondary — route/map blue */
  --route-dim: rgba(76,125,255,0.14);
  --alert: #ff9548;       /* whatsapp / alerts amber */
  --danger: #ff5f6d;      /* panic button / destructive */

  --grad-signal: #fa1e4e;
  --grad-dark: radial-gradient(120% 120% at 100% 0%, rgba(76,125,255,0.16) 0%, rgba(7,11,20,0) 55%);
  --nav-bg: rgba(7,11,20,0.72);
  --wash-1: rgba(250,30,78,0.08);
  --wash-2: rgba(76,125,255,0.10);

  /* Type scale */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 3.75rem;

  /* Spacing (8pt scale) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  --shadow-elev: 0 20px 60px rgba(0,0,0,0.35);
  --ease: cubic-bezier(.16,.84,.44,1);
  --dur: 220ms;

  --container: 1200px;
}

/* Light theme — same brand accents, inverted surfaces */
html[data-theme="light"]{
  --bg: #f5f6fa;
  --bg-soft: #ffffff;
  --surface: rgba(11,17,32,0.035);
  --surface-strong: rgba(11,17,32,0.065);
  --border: rgba(11,17,32,0.10);
  --border-strong: rgba(11,17,32,0.18);

  --text: #0e1420;
  --text-muted: #4c5468;
  --text-faint: #838da3;

  --shadow-elev: 0 20px 50px rgba(20,26,43,0.12);
  --nav-bg: rgba(255,255,255,0.75);
  --wash-1: rgba(250,30,78,0.05);
  --wash-2: rgba(76,125,255,0.06);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

/* Smooth color crossfade for anything not covered by the View Transition */
*, *::before, *::after{
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}

/* Themed scrollbar */
html{ scrollbar-width: thin; scrollbar-color: var(--signal) var(--bg-soft); }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background: var(--bg-soft); }
::-webkit-scrollbar-thumb{ background: var(--signal); border-radius: var(--radius-full); border:3px solid var(--bg-soft); }
::-webkit-scrollbar-thumb:hover{ background: #ff4d73; }
::-webkit-scrollbar-corner{ background: var(--bg-soft); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body::before{
  content:"";
  position: fixed; inset:0;
  background:
    radial-gradient(60% 40% at 15% 0%, var(--wash-1), transparent 60%),
    radial-gradient(50% 35% at 100% 10%, var(--wash-2), transparent 60%);
  pointer-events:none;
  z-index:0;
}

h1,h2,h3,h4{
  font-family:'Inter', sans-serif;
  line-height:1.15;
  margin:0 0 var(--sp-4);
  letter-spacing:-0.02em;
  color:var(--text);
}
h1{ font-size: clamp(2.1rem, 3.6vw, 3.4rem); font-weight:800; }
h2{ font-size: clamp(1.75rem, 3.4vw, var(--fs-3xl)); font-weight:800; }
h3{ font-size: var(--fs-lg); font-weight:700; }
p{ margin:0 0 var(--sp-4); color: var(--text-muted); }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }

.container{
  width:100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-5);
  position:relative;
  z-index:1;
}

/* Eyebrow tag — plain solid label */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size: var(--fs-xs); font-weight:700; letter-spacing:0.06em;
  text-transform:uppercase; color:#fff;
  background:#921933;
  padding: 6px 14px; border-radius:6px;
  margin-bottom: var(--sp-4);
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:#fff; flex:none; }

.section{ padding: var(--sp-9) 0; position:relative; z-index:1; }
.section-head{ max-width: 640px; margin-bottom: var(--sp-7); }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head p{ font-size: var(--fs-md); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 26px; border-radius: var(--radius-full);
  font-weight:600; font-size: var(--fs-sm);
  border:1px solid transparent; cursor:pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  white-space:nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--grad-signal); color:#04150f; box-shadow: 0 8px 24px rgba(250,30,78,0.28); }
.btn-primary:hover{ box-shadow: 0 10px 30px rgba(250,30,78,0.42); transform: translateY(-1px); }
.btn-ghost{ background: var(--surface); color:var(--text); border-color: var(--border); }
.btn-ghost:hover{ background: var(--surface-strong); border-color: var(--border-strong); }
.btn-outline{ background:transparent; color:var(--text); border-color: var(--border-strong); }
.btn-outline:hover{ background: var(--surface); }
.btn-lg{ padding:16px 32px; font-size:var(--fs-base); }
.btn-sm{ padding:9px 18px; font-size:var(--fs-xs); }
.btn-block{ width:100%; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--route); outline-offset: 3px; border-radius: var(--radius-sm);
}

/* Nav */
.nav{
  position: sticky; top:0; z-index:50;
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding: var(--sp-3) 0; gap: var(--sp-5); }
.brand{ display:flex; align-items:center; gap:10px; font-family:'Inter',sans-serif; font-weight:700; font-size:1.15rem; }
.brand-mark{ width:34px; height:34px; flex:none; object-fit:contain; }
.nav-links{ display:flex; align-items:center; gap: var(--sp-6); }
/* Header (Menú + ×) and bottom CTA only exist for the mobile drawer —
   hidden by default so they don't show up as extra items in the desktop nav. */
.nav-links-head, .nav-links-cta{ display:none; }
.nav-links > li > a{ font-size: var(--fs-sm); color: var(--text-muted); font-weight:500; padding:8px 0; position:relative; }
.nav-links > li > a:hover{ color: var(--text); }
.nav-links > li > a.active{ color: var(--text); }
.nav-actions{ display:flex; align-items:center; gap: var(--sp-3); }
.nav-drop{ position:relative; }
.nav-drop-panel{
  position:absolute; top: calc(100% + 16px); left:50%; transform:translateX(-50%);
  background: var(--bg-soft); border:1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--sp-3); min-width:260px; box-shadow: var(--shadow-elev);
  opacity:0; visibility:hidden; translate:0 8px;
  transition: all var(--dur) var(--ease);
}
.nav-drop:hover .nav-drop-panel, .nav-drop:focus-within .nav-drop-panel{ opacity:1; visibility:visible; translate:0 0; }
.nav-drop-panel a{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:10px; font-size:var(--fs-sm); color:var(--text); }
.nav-drop-panel a:hover{ background: var(--surface); }
.nav-drop-panel a span{ font-size:12px; color:var(--text-faint); font-weight:400; }
.nav-toggle{ display:none; background:none; border:1px solid var(--border); color:var(--text); width:42px; height:42px; border-radius:10px; align-items:center; justify-content:center; cursor:pointer; }

/* Hero */
.hero{ padding: var(--sp-9) 0 var(--sp-8); position:relative; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns: 0.82fr 1.18fr; gap: var(--sp-7); align-items:center; }
.hero-stats{ display:flex; gap: var(--sp-6); margin-top: var(--sp-6); flex-wrap:wrap; }
.hero-stat{ display:flex; align-items:center; gap:10px; }
.hero-stat-icon{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; background:var(--signal-dim); color:var(--signal); flex:none; }
.hero-stat b{ display:block; font-family:'Inter',sans-serif; font-size:1.5rem; color:var(--text); }
.hero-stat span{ font-size: var(--fs-xs); color: var(--text-faint); text-transform:uppercase; letter-spacing:0.05em; }
.hero-cta{ display:flex; gap: var(--sp-3); flex-wrap:wrap; margin-top: var(--sp-6); }

/* Funciones avanzadas: ticker + acordeón */
.feat-ticker-wrap{
  overflow:hidden; max-width:900px; margin:0 auto var(--sp-6);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.feat-ticker-track{ display:flex; gap:14px; width:max-content; animation: brand-scroll 26s linear infinite; }
.feat-ticker-wrap:hover .feat-ticker-track{ animation-play-state:paused; }
.feat-pill{
  display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border);
  padding:10px 18px; border-radius:var(--radius-full); font-size:var(--fs-sm); font-weight:600;
  color:var(--text-muted); white-space:nowrap; flex-shrink:0;
}
.feat-pill svg{ color:var(--signal); }

.feat-accordion{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.feat-acc-item{ border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface); transition: border-color var(--dur) var(--ease); }
.feat-acc-item.open{ border-color: rgba(250,30,78,0.35); }
.feat-acc-head{
  width:100%; display:flex; align-items:center; gap:14px; padding:18px 20px; background:transparent;
  border:none; color:var(--text); font-weight:600; font-size:var(--fs-base); cursor:pointer; text-align:left;
}
.feat-acc-ico{ color:var(--signal); display:flex; flex:none; }
.feat-acc-title{ flex:1; }
.feat-acc-chev{ color:var(--text-faint); transition:transform var(--dur) var(--ease); flex:none; }
.feat-acc-item.open .feat-acc-chev{ transform:rotate(180deg); color:var(--signal); }
.feat-acc-body{ max-height:0; overflow:hidden; transition:max-height var(--dur) var(--ease); }
.feat-acc-item.open .feat-acc-body{ max-height:180px; }
.feat-acc-body p{ margin:0; padding:0 20px 20px 54px; font-size:var(--fs-sm); }
@media (max-width:640px){ .feat-acc-body p{ padding-left:20px; } }

/* Hero visual: real product screenshot, plain and centered */
.hero-visual{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  margin-right: -3%;
}
.hero-visual-frame{
  position:relative; display:block; width:112%; max-width:none; flex-shrink:0;
}
.hero-visual-img{
  display:block; width:100%; height:auto; position:relative; z-index:1; pointer-events:none;
}
.hero-visual-video{
  position:absolute; z-index:2; left:1.3%; top:2.31%; width:96.94%; height:78.87%;
  object-fit:cover; background:#04070d; pointer-events:none;
}
@media (max-width: 1024px){
  .hero-visual{ margin-right:0; }
  .hero-visual-frame{ width:100%; }
}

/* SIM card 3D hero (Emnify) — base64 image supplied per-page via --sim-card-src */
.sim-hero{ position:relative; width:100%; max-width:260px; margin:0 auto; }
.sim-hero-aurora{
  position:absolute; inset:-35%; z-index:0; border-radius:50%;
  background: conic-gradient(from 0deg at 50% 50%, #1a1550 0deg, #33246e 60deg, #cba24a 120deg, #1a1550 180deg, #241a5c 240deg, #4b3a90 300deg, #1a1550 360deg);
  filter: blur(38px) saturate(1.3);
  opacity:0.45;
  animation: sim-spin 28s linear infinite;
}
@keyframes sim-spin{ to{ transform: rotate(360deg); } }
.sim-hero-scene{ position:relative; z-index:1; perspective: 900px; }
.sim-hero-float{ animation: sim-float 5s ease-in-out infinite; transform-style: preserve-3d; }
@keyframes sim-float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }
.sim-hero-tilt{
  position:relative; transform-style: preserve-3d;
  transition: transform .12s ease-out; will-change: transform;
}
.sim-hero-glow{
  position:absolute; inset:-18%; z-index:0; border-radius:50%;
  background: radial-gradient(circle, rgba(203,162,74,0.5) 0%, rgba(76,70,160,0.32) 40%, transparent 70%);
  filter: blur(20px);
  animation: sim-pulse 3.2s ease-in-out infinite;
}
@keyframes sim-pulse{ 0%,100%{ opacity:.55; transform:scale(.92); } 50%{ opacity:.9; transform:scale(1.05); } }
.sim-hero-img{
  position:relative; z-index:2; display:block; width:100%; aspect-ratio: 810 / 868;
  background-image: var(--sim-card-src); background-size:contain; background-repeat:no-repeat; background-position:center;
  filter: drop-shadow(0 16px 20px rgba(0,0,0,0.55));
}
.sim-hero-sheen{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.35) 48%, rgba(255,255,255,0.06) 55%, transparent 70%);
  mix-blend-mode: soft-light;
  -webkit-mask-image: var(--sim-card-src); mask-image: var(--sim-card-src);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  transition: transform .12s ease-out;
}
.sim-hero-rings{ position:absolute; left:70.5%; top:42%; width:0; height:0; z-index:4; pointer-events:none; }
.sim-ring{
  position:absolute; left:0; top:0; width:10px; height:10px; margin:-5px 0 0 -5px;
  border-radius:50%; border:2px solid rgba(255,255,255,0.9);
  box-shadow: 0 0 6px 1px rgba(203,162,74,0.5);
  opacity:0; animation: sim-ring-pulse 2.6s ease-out infinite;
}
.sim-ring.r2{ animation-delay:.85s; }
.sim-ring.r3{ animation-delay:1.7s; }
@keyframes sim-ring-pulse{
  0%{ transform:scale(.4); opacity:.9; border-color: rgba(255,255,255,.95); }
  70%{ opacity:.35; }
  100%{ transform:scale(7); opacity:0; border-color: rgba(203,162,74,.6); }
}
.sim-hero-reflection{
  position:absolute; left:0; top:100%; width:100%; aspect-ratio: 810 / 868; z-index:0; opacity:0.4;
  background-image: var(--sim-card-src); background-size:contain; background-repeat:no-repeat; background-position:center;
  transform: scaleY(-1);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.28), transparent 60%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.28), transparent 60%);
}
@media (max-width: 640px){ .sim-hero-reflection{ display:none; } .sim-hero{ max-width:200px; } }

/* Split 2-col cards (SIM IoT, marca blanca) — were inline grids before, moved
   to classes so they can actually collapse on mobile. */
.split-grid{ display:grid; align-items:center; }
.split-grid-sim{ grid-template-columns: 1.3fr 1fr; gap:32px; }
.split-grid-wl{ grid-template-columns: 1fr 1fr; gap:40px; }

/* Mockup: phone */
.mock-phone{
  width:230px; background: var(--bg-soft); border:1px solid var(--border-strong); border-radius:34px;
  padding:14px 10px; box-shadow: var(--shadow-elev);
}
.mock-phone .screen{ background: var(--bg); border-radius:22px; overflow:hidden; border:1px solid var(--border); }
.mock-phone .notch{ width:70px; height:14px; background:var(--border-strong); border-radius:var(--radius-full); margin:0 auto 8px; }
.mock-chat{ padding: var(--sp-3); display:flex; flex-direction:column; gap:8px; }
.mock-chat-standalone{ width:100%; max-width:340px; padding:0; margin:0 auto; }
.mock-chat-standalone .mock-bubble{ max-width:88%; box-shadow: var(--shadow-elev); }
.mock-bubble{
  max-width:82%; padding:9px 12px; border-radius:14px; font-size:12.5px; color:var(--text);
  background:var(--surface-strong); border:1px solid var(--border);
  opacity:0; transform: translateY(14px) scale(.92);
  animation: mock-bubble-in .6s cubic-bezier(.34,1.56,.64,1) forwards paused;
}
.mock-bubble.in{ align-self:flex-start; border-bottom-left-radius:4px; }
.mock-bubble.out{ align-self:flex-end; background: var(--signal-dim); border-color: rgba(250,30,78,0.35); border-bottom-right-radius:4px; }
.mock-bubble small{ display:block; color:var(--text-faint); font-size:10px; margin-top:4px; }
.mock-bubble-ico{ display:inline-flex; vertical-align:-3px; margin-right:6px; flex:none; }
.reveal.in .mock-bubble{ animation-play-state: running; }
.mock-chat .mock-bubble:nth-child(1){ animation-delay:.15s; }
.mock-chat .mock-bubble:nth-child(2){ animation-delay:.45s; }
.mock-chat .mock-bubble:nth-child(3){ animation-delay:.75s; }
@keyframes mock-bubble-in{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .mock-bubble{ animation:none; opacity:1; transform:none; } }

/* Logos / marquee */
.logo-row{ display:flex; flex-wrap:wrap; align-items:center; gap: var(--sp-6); opacity:0.75; }
.logo-chip{ display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); color:var(--text-muted); font-weight:600; }
.logo-chip .ico{ width:22px; height:22px; color:var(--text-faint); }
.brand-marquee{
  overflow:hidden; width:100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.brand-track{ display:flex; width:max-content; animation: brand-scroll 32s linear infinite; }
.brand-marquee:hover .brand-track{ animation-play-state: paused; }
.brand-group{ display:flex; align-items:center; gap: var(--sp-7); padding-right: var(--sp-7); flex-shrink:0; }
.brand-logo{
  height:27px; width:auto; display:block; flex-shrink:0;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  opacity:0.88;
}
.brand-logo:hover{ transform: translateY(-2px) scale(1.05); opacity:1; }
@keyframes brand-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (max-width:640px){ .brand-logo{ height:21px; } .brand-group{ gap: var(--sp-6); padding-right: var(--sp-6); } }

/* Bento grid */
.bento{ display:grid; grid-template-columns: repeat(6,1fr); gap: var(--sp-4); }
.bento .card{ grid-column: span 2; }
.bento .card.w3{ grid-column: span 3; }
.bento .card.w4{ grid-column: span 4; }
.bento .card.w6{ grid-column: span 6; }

.card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--sp-5); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.card:hover{ border-color: var(--border-strong); background: var(--surface-strong); transform: translateY(-2px); }
.card .icon{
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background: var(--signal-dim); color: var(--signal); margin-bottom: var(--sp-4); border:1px solid rgba(250,30,78,0.28);
}
.card h3{ margin-bottom:6px; }
.card p{ margin:0; font-size: var(--fs-sm); }
.card.route .icon{ background: var(--route-dim); color: var(--route); border-color: rgba(76,125,255,0.3); }
.card.alert .icon{ background: rgba(255,149,72,0.14); color: var(--alert); border-color: rgba(255,149,72,0.3); }

/* Checklist grid */
.check-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-3); }
.check-item{ display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--surface); border:1px solid var(--border); border-radius:12px; font-size:var(--fs-sm); font-weight:500; }
.check-item svg{ color:var(--signal); flex:none; }

/* App icons stage — KnoxTrack app first, cursor-click reveal animation */
.app-icons-stage{ display:flex; flex-wrap:wrap; align-items:center; gap: var(--sp-7); padding: var(--sp-5) 0 var(--sp-3); }
.ai-main{ display:flex; flex-direction:column; align-items:center; gap:10px; flex:none; }
.ai-icon-main{ position:relative; width:64px; height:64px; display:flex; align-items:center; justify-content:center; }
.ai-icon-img{ width:100%; height:100%; object-fit:contain; display:block; }
.ai-label{ font-size:var(--fs-xs); font-weight:700; color:var(--text-faint); }
.ai-cursor{ position:absolute; top:50%; left:50%; opacity:0; pointer-events:none; filter:drop-shadow(0 2px 5px rgba(0,0,0,.45)); z-index:2; }
.ai-ripple{ position:absolute; inset:0; border-radius:22px; border:2px solid var(--signal); opacity:0; pointer-events:none; }
.app-icons-stage.play .ai-cursor{ animation: aiCursorMove 3.6s ease infinite; }
.app-icons-stage.play .ai-ripple{ animation: aiRipplePulse 3.6s ease infinite; }
.ai-icon-img{ transform-origin:center; }
.app-icons-stage.play .ai-icon-img{ animation: aiIconPress 3.6s ease infinite; }
.ai-others{ display:grid; grid-template-columns:repeat(3,1fr); gap: var(--sp-3); flex:1; min-width:280px; }
.ai-icon-item{ display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--surface); border:1px solid var(--border); border-radius:12px; font-size:var(--fs-sm); font-weight:500; opacity:0; transform: translateY(8px) scale(.94); }
.ai-icon-item .ai-icon{ display:flex; flex:none; }
.app-icons-stage.play .ai-icon-item{ animation: aiIconPop 3.6s ease infinite; animation-delay: calc(var(--d) * 0.1s); }
@keyframes aiCursorMove{
  0%{ opacity:0; transform: translate(-10%, -190%) scale(1); }
  16%{ opacity:1; transform: translate(-50%, -50%) scale(1); }
  27%{ transform: translate(-50%, -50%) scale(0.82); }
  36%{ transform: translate(-50%, -50%) scale(1); }
  70%{ opacity:1; transform: translate(-50%, -50%) scale(1); }
  84%,100%{ opacity:0; transform: translate(-50%, -50%) scale(1); }
}
@keyframes aiIconPress{
  0%,24%{ transform: scale(1); }
  29%{ transform: scale(0.88); }
  34%{ transform: scale(1.05); }
  40%,100%{ transform: scale(1); }
}
@keyframes aiRipplePulse{
  0%,25%{ opacity:0; transform:scale(0.82); }
  32%{ opacity:.7; transform:scale(1); }
  48%{ opacity:0; transform:scale(1.4); }
  100%{ opacity:0; }
}
@keyframes aiIconPop{
  0%,25%{ opacity:0; transform: translateY(8px) scale(.94); }
  40%,88%{ opacity:1; transform: translateY(0) scale(1); }
  100%{ opacity:1; transform: translateY(0) scale(1); }
}
@media (max-width:640px){
  .app-icons-stage{ flex-direction:column; align-items:flex-start; }
  .ai-main{ flex-direction:row; }
  .ai-others{ grid-template-columns:1fr 1fr; min-width:0; width:100%; }
}

/* App showcase */
.app-row{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items:center; padding: var(--sp-8) 0; border-top:1px solid var(--border); }
.app-row:first-of-type{ border-top:none; }
.app-row.reverse .app-visual{ order:2; }
.app-tag{ display:inline-block; font-size:var(--fs-xs); font-weight:700; color:var(--route); background:var(--route-dim); border:1px solid rgba(76,125,255,0.3); padding:5px 12px; border-radius:var(--radius-full); margin-bottom:var(--sp-3); text-transform:uppercase; letter-spacing:0.04em; }
.app-visual{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-6); min-height:260px; display:flex; align-items:center; justify-content:center; }
.app-visual img{ max-width:100%; max-height:320px; width:auto; height:auto; object-fit:contain; }
.app-visual-mockup{ background: transparent; border:none; padding: var(--sp-4) 0; }
.app-visual-plain{ background: transparent; border:none; padding: var(--sp-4) 0; min-height:0; }
.app-visual-map{ background: transparent; border:none; padding:0; min-height:0; width:100%; }

/* Real map (Leaflet) — "Rastrea celulares, tablets y vehículos" */
.map-card-wrapper{
  width:100%; height:320px; background:#0b1120; border-radius: var(--radius-lg);
  overflow:hidden; position:relative; border:1px solid var(--border); box-shadow: var(--shadow-elev);
}
.map-card-wrapper #ktMap{ width:100%; height:100%; background:#0b1120; }
.map-card-wrapper .leaflet-control-zoom,
.map-card-wrapper .leaflet-control-attribution{ display:none !important; }
.map-glass-panel{
  position:absolute; top:16px; left:16px; z-index:1000; max-width:230px;
  background: rgba(11,17,32,0.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border:1px solid rgba(255,255,255,0.12); padding:12px 16px; border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4); pointer-events:none;
}
.badge-bar{ display:flex; justify-content:flex-end; margin-bottom:8px; }
.status-live{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.5px; color:#fff; }
.pulse-dot-live{ width:7px; height:7px; background:#fa1e4e; border-radius:50%; box-shadow:0 0 8px #fa1e4e; animation: kt-live-blink 1.4s infinite; }
@keyframes kt-live-blink{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.85); } }
.location-info h3{ font-size:14px; font-weight:700; color:#fff; line-height:1.3; margin-bottom:2px; }
.location-info p{ font-size:11.5px; color:rgba(255,255,255,0.55); font-weight:500; }
.custom-pulse-container{ position:relative; width:26px; height:26px; }
.custom-pulse-dot{
  width:11px; height:11px; background:#fa1e4e; border-radius:50%; position:absolute; top:7.5px; left:7.5px; z-index:2;
  box-shadow:0 0 14px 2px rgba(250,30,78,0.7);
}
.custom-pulse-ring{
  width:26px; height:26px; border:2px solid #fa1e4e; border-radius:50%; position:absolute; top:0; left:0; z-index:1;
  animation: kt-map-ring 1.8s infinite cubic-bezier(.215,.61,.355,1);
}
@keyframes kt-map-ring{ 0%{ transform:scale(.4); opacity:0; } 20%{ opacity:.9; } 100%{ transform:scale(2.4); opacity:0; } }
@media (max-width:640px){ .map-card-wrapper{ height:260px; } .map-glass-panel{ max-width:170px; padding:10px 12px; top:12px; left:12px; } .location-info h3{ font-size:12.5px; } }

/* Real map variant — "Explora los recorridos" (trip playback, not live) */
.map-card-wrapper.map-card-trip #ktMap2{ width:100%; height:100%; background:#0b1120; }
.map-card-wrapper.map-card-trip .leaflet-control-zoom,
.map-card-wrapper.map-card-trip .leaflet-control-attribution{ display:none !important; }
.status-done{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.5px; color:#4ade80; }
.trip-start-dot{
  width:14px; height:14px; border-radius:50%; background:#4c7dff; border:2.5px solid #0b1120;
  box-shadow:0 0 0 2px #4c7dff, 0 2px 6px rgba(0,0,0,0.5);
}
/* Marching-ants flow along the completed route, drawn by Leaflet as an SVG path */
.kt-route-flow{ stroke-dasharray:10 8; animation: kt-route-flow 1.1s linear infinite; }
@keyframes kt-route-flow{ to{ stroke-dashoffset:-36; } }
@media (prefers-reduced-motion: reduce){ .kt-route-flow{ animation:none; } }
.app-visual-mockup img{ max-height:440px; }
@media (max-width:640px){ .app-visual-mockup img{ max-height:320px; } }

/* Entrance animation for the real app mockups — a touch richer than the
   generic .reveal fade so the images feel like they settle into place. */
.app-visual-mockup img{
  opacity:0; transform: translateY(34px) scale(.93); filter: blur(10px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), filter .9s cubic-bezier(.16,1,.3,1);
  transition-delay: .15s;
  will-change: opacity, transform, filter;
}
.reveal.in .app-visual-mockup img{ opacity:1; transform:none; filter:blur(0); }
.app-row.reverse .app-visual-mockup img{ transition-delay: .05s; }

/* Mockup de celular al lado del mockup principal, sin marco ni sombra: imagen pura */
.app-visual-mockup.has-phone{ position:relative; padding-right: 90px; }
.app-visual-mockup .app-visual-phone{
  position:absolute; right:-10px; bottom:13%; width:140px; max-height:none;
  border-radius:0; box-shadow:none; border:none; background:transparent;
  transition-delay: .4s;
}
.app-row.reverse .app-visual-mockup .app-visual-phone{ transition-delay: .3s; }
@media (max-width:900px){
  .app-visual-mockup.has-phone{ padding-right: 70px; }
  .app-visual-mockup .app-visual-phone{ width:110px; right:-6px; bottom:13%; }
}
@media (max-width:640px){
  .app-visual-mockup.has-phone{ padding-right: 56px; }
  .app-visual-mockup .app-visual-phone{ width:90px; right:0; bottom:13%; }
}
.app-feats{ display:flex; flex-wrap:wrap; gap:8px; margin: var(--sp-4) 0 var(--sp-5); }
.pill{ font-size:12.5px; font-weight:600; color:var(--text-muted); background:var(--surface); border:1px solid var(--border); padding:6px 12px; border-radius:var(--radius-full); display:inline-flex; align-items:center; gap:6px; }
.pill svg{ color:var(--signal); flex:none; }
.app-cta-note{ margin-top: var(--sp-3); font-size:var(--fs-xs); color:var(--text-faint); }
.badge-soon{ display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); font-weight:700; color:var(--alert); background:rgba(255,149,72,0.12); border:1px solid rgba(255,149,72,0.3); padding:4px 10px; border-radius:var(--radius-full); margin-left:8px; text-transform:uppercase; }

/* Timeline */
.timeline{ display:flex; flex-direction:column; gap:0; }
.tl-item{ display:grid; grid-template-columns:110px 32px 1fr; gap: var(--sp-4); padding-bottom: var(--sp-7); position:relative; }
.tl-item:last-child{ padding-bottom:0; }
.tl-year{ font-family:'Inter',sans-serif; font-size:1.4rem; color:var(--signal); font-weight:700; }
.tl-dot-wrap{ display:flex; flex-direction:column; align-items:center; }
.tl-dot{ width:14px; height:14px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 4px var(--signal-dim); flex:none; }
.tl-line{ flex:1; width:2px; background: var(--border); margin-top:6px; }
.tl-item:last-child .tl-line{ display:none; }

/* Team */
.team-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-5); }
.team-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding: var(--sp-5); text-align:center; }
.avatar{ width:76px; height:76px; border-radius:50%; margin:0 auto var(--sp-3); display:flex; align-items:center; justify-content:center; font-family:'Inter',sans-serif; font-weight:700; font-size:1.3rem; background:var(--grad-signal); color:#04150f; }
.team-card h3{ margin-bottom:2px; }
.team-role{ color:var(--route); font-size:var(--fs-sm); font-weight:600; margin-bottom:10px; display:block; }
.team-social{ display:flex; justify-content:center; gap:10px; margin-top:var(--sp-3); }
.team-social a{ width:32px; height:32px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-faint); }
.team-social a:hover{ color:var(--text); border-color:var(--border-strong); }
.team-contact{
  display:inline-flex; align-items:center; gap:7px; margin:var(--sp-3) auto 0; width:fit-content;
  font-size:var(--fs-sm); font-weight:600; color:var(--text); border:1px solid var(--border);
  border-radius:var(--radius-full); padding:8px 16px; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.team-contact svg{ color:var(--signal); flex:none; }
.team-contact:hover{ border-color:var(--border-strong); background:var(--bg-soft); }

/* Pricing */
.plan-toggle{ display:inline-flex; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-full); padding:4px; margin-bottom:var(--sp-7); }
.plan-toggle button{ border:none; background:transparent; color:var(--text-muted); padding:10px 22px; border-radius:var(--radius-full); font-weight:600; font-size:var(--fs-sm); cursor:pointer; transition: all var(--dur) var(--ease); }
.plan-toggle button.active{ background: var(--grad-signal); color:#04150f; }
.plan-panel{ display:none; }
.plan-panel.active{ display:block; }
.plan-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-5); align-items:stretch; }
.plan-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding: var(--sp-6); display:flex; flex-direction:column; }
.plan-card.highlight{ border-color: rgba(250,30,78,0.4); background: linear-gradient(180deg, rgba(250,30,78,0.08), rgba(250,30,78,0.02)); position:relative; }
.plan-card.highlight::before{ content:"Recomendado"; position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--grad-signal); color:#04150f; font-size:11px; font-weight:700; padding:5px 14px; border-radius:var(--radius-full); text-transform:uppercase; letter-spacing:.04em; }
.plan-name{ font-size:var(--fs-sm); color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
.plan-price{ font-family:'Inter',sans-serif; font-size:2.1rem; margin: 10px 0 4px; }
.plan-price span{ font-size:var(--fs-sm); color:var(--text-faint); font-weight:400; font-family:'Inter',sans-serif; }
.plan-list{ margin: var(--sp-5) 0; display:flex; flex-direction:column; gap:12px; flex:1; }
.plan-list li{ display:flex; gap:10px; font-size:var(--fs-sm); color:var(--text-muted); align-items:flex-start; }
.plan-list li svg{ flex:none; margin-top:2px; color:var(--signal); }
.plan-list li.no svg{ color:var(--text-faint); }
.plan-list li.no{ color: var(--text-faint); }

/* Planes SIM internacionales */
.sim-plan-grid{ grid-template-columns: repeat(4,1fr); }
@media (max-width:900px){ .sim-plan-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:520px){ .sim-plan-grid{ grid-template-columns: 1fr; } }
.sim-plan-card{ text-align:left; }
.sim-plan-card .plan-name{ display:block; margin-top:10px; }
.sim-plan-icon{
  width:46px; height:46px; border-radius:50%; background:var(--signal-dim); color:var(--signal);
  display:flex; align-items:center; justify-content:center; flex:none; margin-bottom:var(--sp-4);
  border:1px solid rgba(250,30,78,0.28);
}
.sim-plan-price{ font-family:'Inter',sans-serif; font-size:1.9rem; font-weight:800; margin: 8px 0 2px; }
.sim-plan-price span{ font-size:var(--fs-sm); color:var(--text-faint); font-weight:400; }
.sim-plan-note{ font-size:var(--fs-sm); color:var(--text-faint); margin-top:6px; }
.sim-band{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6); flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--sp-6); margin-top:var(--sp-7);
}
.sim-band h3{ font-size:var(--fs-lg); margin:0 0 4px; }
.sim-band p{ margin:0; max-width:520px; }

/* Quote form */
.quote-wrap{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items:flex-start; }
.form-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding: var(--sp-6); }
.field{ margin-bottom: var(--sp-4); }
.field label{ display:block; font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-faint); margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%; background: var(--bg-soft); border:1px solid var(--border); color:var(--text);
  padding:12px 14px; border-radius:10px; font-size:var(--fs-sm); font-family:inherit;
}
.field textarea{ resize:vertical; min-height:110px; }
.radio-group{ display:flex; gap:10px; flex-wrap:wrap; }
.radio-chip{ position:relative; }
.radio-chip input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.radio-chip span{ display:inline-flex; padding:10px 16px; border-radius:var(--radius-full); border:1px solid var(--border); font-size:var(--fs-sm); color:var(--text-muted); background:var(--bg-soft); }
.radio-chip input:checked + span{ border-color: rgba(250,30,78,0.5); color:var(--signal); background:var(--signal-dim); }
.form-note{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--text-faint); }

/* Testimonials */
.tsm-track{ display:grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-5); }
.tsm-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding: var(--sp-6); display:flex; flex-direction:column; height:100%; }
.tsm-quote{ color:var(--text); font-size:var(--fs-md); flex:1; margin-bottom: var(--sp-5); }
.tsm-person{ display:flex; align-items:center; gap:12px; }
.tsm-avatar{ width:44px; height:44px; border-radius:50%; background:var(--route-dim); color:var(--route); display:flex; align-items:center; justify-content:center; font-weight:700; font-family:'Inter',sans-serif; border:1px solid rgba(76,125,255,0.3); }
.tsm-person b{ display:block; font-size:var(--fs-sm); }
.tsm-person span{ font-size:12.5px; color:var(--text-faint); }

/* CTA band */
.cta-band{ background: linear-gradient(135deg, rgba(250,30,78,0.12), rgba(76,125,255,0.10)); border:1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-8); display:flex; align-items:center; justify-content:space-between; gap: var(--sp-6); flex-wrap:wrap; }
.cta-band h2{ margin-bottom:8px; }
.cta-band p{ margin:0; max-width:480px; }

/* Footer */
.footer{ border-top:1px solid var(--border); padding: var(--sp-8) 0 var(--sp-6); background: var(--bg-soft); }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1.1fr; gap: var(--sp-7); margin-bottom: var(--sp-7); }
.footer-col h4{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); margin-bottom: var(--sp-4); }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a{ color:var(--text-muted); font-size:var(--fs-sm); }
.footer-col a:hover{ color:var(--text); }
.footer-social{ display:flex; gap:10px; margin-top: var(--sp-4); }
.footer-social a{ width:36px; height:36px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-faint); }
.footer-social a:hover{ color:var(--text); border-color:var(--border-strong); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top: var(--sp-5); border-top:1px solid var(--border); font-size:13px; color:var(--text-faint); flex-wrap:wrap; gap:10px; }

/* Page hero (inner pages) */
.page-hero{ padding: var(--sp-8) 0 var(--sp-7); text-align:center; }
.page-hero h1{ max-width:760px; margin:0 auto var(--sp-4); }
.page-hero p{ max-width:600px; margin:0 auto; font-size:var(--fs-md); }

/* Utility */
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.text-center{ text-align:center; }
.flex{ display:flex; flex-wrap:wrap; } .items-center{ align-items:center; } .gap-2{ gap:8px; } .gap-3{ gap:12px; }
.reveal{ opacity:0; translate:0 18px; transition: opacity 700ms var(--ease), translate 700ms var(--ease); }
.reveal.in{ opacity:1; translate:0 0; }

/* WhatsApp float */
.wa-float{
  position:fixed; bottom:24px; right:24px; z-index:60;
  width:58px; height:58px; border-radius:50%; background: var(--grad-signal);
  display:flex; align-items:center; justify-content:center; box-shadow: 0 10px 30px rgba(250,30,78,0.4);
  color:#04150f;
}
.wa-float:hover{ transform: translateY(-2px); }

/* Floating audio play/pause control (left side, independent of the chat widget) */
.audio-fab{
  position:fixed; bottom:24px; left:24px; z-index:70;
  width:46px; height:46px; border-radius:50%; background:var(--bg-soft);
  border:1px solid var(--border); box-shadow: var(--shadow-elev);
  display:flex; align-items:center; justify-content:center; color:var(--signal);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.audio-fab:hover{ transform:translateY(-2px); border-color:var(--border-strong); }
.audio-fab-icon{ position:absolute; transition: opacity 160ms ease, transform 160ms ease; }
.audio-fab-icon-paused{ opacity:0; transform:scale(.6); }
.audio-fab.is-paused .audio-fab-icon-playing{ opacity:0; transform:scale(.6); }
.audio-fab.is-paused .audio-fab-icon-paused{ opacity:1; transform:scale(1); }
@media (max-width: 640px){
  .audio-fab{ bottom:calc(16px + env(safe-area-inset-bottom)); left:16px; width:42px; height:42px; }
}

/* Smart chat widget (replaces WhatsApp float on homepage) */
.chat-widget{ position:fixed; bottom:24px; right:24px; z-index:70; display:flex; flex-direction:column; align-items:flex-end; gap:12px; pointer-events:none; }
.chat-widget > *{ pointer-events:auto; }

.chat-notify{
  max-width:240px; background:var(--bg-soft); border:1px solid var(--border); border-radius:16px 16px 4px 16px;
  padding:12px 16px; box-shadow: var(--shadow-elev); font-size:var(--fs-sm); color:var(--text);
  display:flex; align-items:center; gap:10px; animation: chatNotifyIn 320ms var(--ease);
}
.chat-notify[hidden]{ display:none; }
.chat-notify-close{ flex-shrink:0; width:20px; height:20px; border-radius:50%; font-size:1rem; line-height:1; color:var(--text-faint); display:flex; align-items:center; justify-content:center; }
.chat-notify-close:hover{ background:var(--surface); color:var(--text); }
@keyframes chatNotifyIn{ from{ opacity:0; transform:translateY(8px) scale(.96); } to{ opacity:1; transform:translateY(0) scale(1); } }

.chat-fab{
  position:relative; width:58px; height:58px; border-radius:50%; background:var(--grad-signal);
  display:flex; align-items:center; justify-content:center; box-shadow: 0 10px 30px rgba(250,30,78,0.4);
  color:#04150f; flex-shrink:0; transition: transform var(--dur) var(--ease);
}
.chat-fab:hover{ transform:translateY(-2px); }
.chat-fab-icon{ position:absolute; transition: opacity 160ms ease, transform 160ms ease; }
.chat-fab-icon-close{ opacity:0; transform:scale(.6) rotate(-90deg); }
.chat-widget.is-open .chat-fab-icon-chat{ opacity:0; transform:scale(.6) rotate(90deg); }
.chat-widget.is-open .chat-fab-icon-close{ opacity:1; transform:scale(1) rotate(0deg); }
.chat-fab-dot{ position:absolute; top:2px; right:2px; width:13px; height:13px; border-radius:50%; background:var(--danger); border:2px solid var(--bg); }
.chat-fab-dot[hidden]{ display:none; }

.chat-panel{
  width:min(360px,92vw); height:min(560px,72vh); background:var(--bg-soft); border-radius:var(--radius-lg);
  box-shadow: var(--shadow-elev); border:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden;
  animation: chatPanelIn 220ms var(--ease);
}
.chat-panel[hidden]{ display:none; }
@keyframes chatPanelIn{ from{ opacity:0; transform:translateY(14px) scale(.97); } to{ opacity:1; transform:translateY(0) scale(1); } }

.chat-panel-head{ background:var(--bg); border-bottom:1px solid var(--border); color:var(--text); padding:14px 16px; display:flex; align-items:center; gap:10px; flex-shrink:0; }
.chat-panel-avatar{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.chat-panel-avatar img{ width:100%; height:100%; object-fit:contain; }
.chat-panel-title{ flex:1; min-width:0; display:flex; flex-direction:column; }
.chat-panel-title strong{ font-size:0.92rem; }
.chat-panel-status{ display:flex; align-items:center; gap:5px; font-size:0.72rem; color:var(--signal); margin-top:2px; }
.chat-panel-status .dot{ width:6px; height:6px; border-radius:50%; background:var(--signal); animation: dot-live 2.6s ease-in-out infinite; }
.chat-panel-close{ width:30px; height:30px; border-radius:50%; color:var(--text-muted); font-size:1.3rem; line-height:1; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.chat-panel-close:hover{ background:var(--surface); color:var(--text); }
@keyframes dot-live{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.chat-messages{ flex:1; min-height:0; overflow-y:auto; overflow-anchor:none; padding:16px; display:flex; flex-direction:column; gap:10px; background:var(--bg); }
.chat-msg{ max-width:82%; padding:10px 13px; border-radius:14px; font-size:0.87rem; line-height:1.5; animation: chatMsgIn 220ms ease; }
@keyframes chatMsgIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
.chat-msg--bot{ align-self:flex-start; background:var(--surface); border:1px solid var(--border); border-bottom-left-radius:4px; color:var(--text); }
.chat-msg--user{ align-self:flex-end; background:var(--route); color:#fff; border-bottom-right-radius:4px; }

.chat-typing{ align-self:flex-start; background:var(--surface); border:1px solid var(--border); border-bottom-left-radius:4px; padding:12px 15px; border-radius:14px; display:flex; gap:4px; }
.chat-typing span{ width:6px; height:6px; border-radius:50%; background:var(--text-faint); animation: chatTypingBounce 1.1s ease-in-out infinite; }
.chat-typing span:nth-child(2){ animation-delay:.15s; }
.chat-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes chatTypingBounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-4px); opacity:1; } }

.chat-options{ display:flex; flex-direction:column; gap:6px; align-self:stretch; }
.chat-option-btn{
  text-align:left; background:transparent; border:1px solid var(--route); color:var(--route);
  border-radius:10px; padding:9px 13px; font-size:0.84rem; font-weight:600; font-family:inherit;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chat-option-btn:hover{ background:var(--route); color:#fff; }
.chat-option-btn:disabled{ opacity:.4; pointer-events:none; }

.chat-cta-whatsapp{
  align-self:stretch; display:flex; align-items:center; justify-content:center; gap:8px;
  background: var(--grad-signal); color:#04150f; border-radius:10px; padding:11px 14px; font-size:0.87rem; font-weight:700;
  transition: filter var(--dur) var(--ease);
}
.chat-cta-whatsapp:hover{ filter:brightness(1.08); }
.chat-cta-whatsapp svg{ width:17px; height:17px; }

@media (max-width:480px){
  .chat-widget{ bottom:16px; right:16px; left:16px; align-items:flex-end; }
  .chat-panel{ width:100%; height:min(74dvh,560px); }
  .chat-notify{ max-width:220px; }
}

/* Responsive */
@media (max-width: 1024px){
  .hero-grid{ grid-template-columns:1fr; }
  .bento .card.w3, .bento .card{ grid-column: span 3; }
  .app-row{ grid-template-columns:1fr; }
  .app-row.reverse .app-visual{ order:0; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .plan-grid{ grid-template-columns:1fr; }
  .quote-wrap{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 768px){
  html, body{ overflow-x:hidden; }
  .nav, .nav-row, .container{ backdrop-filter:none; -webkit-backdrop-filter:none; filter:none; transform:none; perspective:none; }
  .nav-links{
    position:fixed !important; top:0 !important; right:0 !important; left:auto !important; margin:0 !important;
    z-index:9999; width:min(82vw,340px); height:100vh; max-width:340px;
    background:var(--bg-soft); border:none; border-left:1px solid var(--border); border-radius:0;
    flex-direction:column; align-items:stretch; padding: var(--sp-6) var(--sp-5) var(--sp-5);
    gap:0; box-shadow: -12px 0 40px rgba(0,0,0,0.5); overflow-y:auto;
    transform: translateX(100%); visibility:hidden;
    transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  .nav-links.open{ transform: translateX(0); visibility:visible; transition: transform var(--dur) var(--ease); }
  body.nav-open{ overflow:hidden; }
  body.nav-open::after{ content:""; position:fixed; inset:0; background:rgba(3,5,10,0.6); z-index:54; }
  .nav{ z-index:60; }

  /* Drawer header: brand label + close button, replaces the old empty
     90px top gap that just cleared the sticky nav visually. */
  .nav-links-head{
    display:flex; align-items:center; justify-content:space-between; width:100%;
    padding-bottom: var(--sp-4); margin-bottom: var(--sp-2); border-bottom:1px solid var(--border);
  }
  .nav-links-brand{ font-weight:700; font-size:0.95rem; letter-spacing:.02em; color:var(--text-faint); text-transform:uppercase; }
  .nav-links-close{
    width:34px; height:34px; border-radius:10px; background:var(--surface); border:1px solid var(--border);
    color:var(--text); font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .nav-links-close:hover{ background: var(--surface-strong); border-color: var(--border-strong); }

  /* Each top-level link becomes a full-width row with a divider, instead of
     floating text with big, uneven gaps. */
  .nav-links > li{ width:100%; }
  .nav-links > li > a{
    display:flex; align-items:center; width:100%; padding:15px 2px;
    font-size:1rem; font-weight:600; color:var(--text-muted);
    border-bottom:1px solid var(--border); border-radius:0;
  }
  .nav-links > li > a:hover{ color:var(--text); }
  .nav-links > li > a.active{ color: var(--signal); }
  .nav-drop > a::after{
    content:"⌄"; margin-left:auto; padding-left:10px; font-size:13px; color:var(--text-faint);
    transition: transform .25s var(--ease);
  }
  .nav-drop.open > a::after{ transform: rotate(180deg); }

  .nav-drop-panel{
    position:static; left:auto; top:auto; right:auto; transform:none; translate:none;
    opacity:1; visibility:visible; box-shadow:none; border:none;
    padding:2px 0 10px 14px; display:none;
    min-width:0; width:100%; max-width:100%; box-sizing:border-box;
    border-bottom:1px solid var(--border);
  }
  .nav-drop.open .nav-drop-panel{ display:flex; flex-direction:column; }
  .nav-drop-panel a{ padding:10px 8px; }

  /* CTA pinned at the bottom of the drawer, so it doesn't look like an
     empty leftover panel */
  .nav-links-cta{ display:block; margin-top: var(--sp-5); }
  .nav-links > li.nav-links-cta > a{ display:inline-flex; padding:13px 26px; border-bottom:none; font-size: var(--fs-sm); font-weight:600; color:#04150f; }

  .nav-toggle{ display:flex; }
  .nav-actions .btn-ghost{ display:none; }

  /* Bigger, more comfortable mobile header: taller bar, larger logo and
     touch targets (44px minimum) instead of the cramped default sizing. */
  .nav-row{ padding: 16px 0; }
  .brand{ font-size:1.1rem; gap:10px; }
  .brand-mark{ width:36px; height:36px; }
  .nav-actions{ gap:10px; }
  .nav-actions .btn-sm{ padding:11px 18px; font-size:13px; }
  .theme-toggle, .nav-toggle{ width:44px; height:44px; }
  .bento .card, .bento .card.w3, .bento .card.w4{ grid-column: span 6; }
  .check-grid{ grid-template-columns:1fr 1fr; }
  .tsm-track{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns:1fr; }
  .hero-stats{ gap: var(--sp-5); }
  .cta-band{ flex-direction:column; text-align:center; }
  .cta-band .btn{ width:100%; white-space:normal; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .split-grid{ grid-template-columns:1fr; gap:28px; }
  .split-grid-sim{ text-align:left; }
  .split-grid-sim .sim-hero{ margin:8px auto 0; }
}
@media (max-width: 480px){
  .check-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .tl-item{ grid-template-columns:80px 24px 1fr; }

  /* Nav overflow fix: brand + Prueba Gratis + theme toggle + hamburger were
     wider than small phone viewports, pushing the hamburger off-screen
     (clipped by html,body{overflow-x:hidden}) so it never appeared. */
  .container{ padding: 0 var(--sp-4); }
  .nav-row{ gap:6px; padding: 14px 0; }
  .brand{ font-size:1rem; gap:7px; }
  .brand-mark{ width:32px; height:32px; }
  .nav-actions{ gap:6px; }
  .nav-actions .btn-sm{ padding:9px 14px; font-size:12px; }
  .theme-toggle, .nav-toggle{ width:44px; height:44px; }
}

/* Light theme — fix up decorative mockup illustrations drawn with hardcoded
   white fills/strokes (they assumed a dark card background). Presentation
   attributes have very low CSS specificity, so a plain attribute selector
   is enough to override them without touching any markup. */
html[data-theme="light"] [fill^="rgba(255,255,255"]{ fill: rgba(11,17,32,0.07); }
html[data-theme="light"] [stroke^="rgba(255,255,255"]{ stroke: rgba(11,17,32,0.16); }

/* Theme toggle button */
.theme-toggle{
  position:relative; width:42px; height:42px; border-radius:10px; flex:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background: var(--surface); border:1px solid var(--border); color:var(--text);
  overflow:hidden;
}
.theme-toggle:hover{ background: var(--surface-strong); border-color: var(--border-strong); }
@media (max-width:480px){ .theme-toggle{ width:38px; height:38px; } }
.theme-icon{ position:absolute; transition: transform .5s var(--ease), opacity .35s ease; }
.theme-icon-sun{ opacity:1; transform: rotate(0deg) scale(1); }
.theme-icon-moon{ opacity:0; transform: rotate(-90deg) scale(.4); }
html[data-theme="light"] .theme-icon-sun{ opacity:0; transform: rotate(90deg) scale(.4); }
html[data-theme="light"] .theme-icon-moon{ opacity:1; transform: rotate(0deg) scale(1); }

/* Circular reveal transition (View Transitions API) */
::view-transition-old(root),
::view-transition-new(root){
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root){ z-index:1; }
::view-transition-new(root){ z-index:2; }

/* Video modal (lightbox for "Ver video" CTAs) */
.video-modal{
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  padding: var(--sp-5); opacity:0; visibility:hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
.video-modal.open{ opacity:1; visibility:visible; transition: opacity .3s var(--ease); }
body.video-open{ overflow:hidden; }
.video-modal-backdrop{ position:absolute; inset:0; background:rgba(3,5,10,0.82); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.video-modal-box{
  position:relative; width:100%; max-width:860px; z-index:1;
  transform: scale(.94); transition: transform .3s var(--ease);
}
.video-modal.open .video-modal-box{ transform: scale(1); }
.video-modal-frame{ position:relative; width:100%; aspect-ratio:16/9; border-radius: var(--radius-md); overflow:hidden; background:#000; box-shadow: var(--shadow-elev); }
.video-modal-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-modal-close{
  position:absolute; top:-44px; right:0; width:36px; height:36px; border-radius:50%;
  background: var(--surface); border:1px solid var(--border); color:#fff; font-size:22px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.video-modal-close:hover{ background: var(--surface-strong); }
@media (max-width:640px){ .video-modal-close{ top:-40px; } }

/* Google Translate widget — keep the auto-translate function running in the
   background, but hide every bit of its default UI (top banner, tooltip,
   highlight boxes) so it doesn't clash with the site's own design. */
#google_translate_element,
.goog-te-banner-frame,
.goog-te-gadget-icon,
.goog-tooltip,
.goog-tooltip:hover,
iframe.skiptranslate{ display:none !important; }
body{ top:0 !important; position:static !important; }
.goog-text-highlight{ background:none !important; box-shadow:none !important; }

/* Login — el botón "Ingresar" abre knoxgps.com en un popup (ver main.js);
   no requiere estilos aquí, ya que el popup es la ventana del navegador. */

/* ===== Dispositivos GPS (K21 / K11) ===== */
.device-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:1080px; margin:0 auto; }
@media (max-width:820px){ .device-grid{ grid-template-columns:1fr; } }
.device-card-full{ grid-column:1 / -1; }
@media (max-width:820px){ .device-card-full{ grid-column:auto; } }
@media (min-width:901px){ .device-card-full{ grid-template-columns:1fr 1.3fr !important; } }
.device-card{
  position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:32px; display:grid; grid-template-columns:1.3fr 1fr; grid-template-rows:1fr auto; grid-template-areas:"body photo" "price price";
  gap:8px 20px; overflow:hidden;
}
@media (max-width:900px){
  .device-card{ grid-template-columns:1fr; grid-template-rows:auto auto auto; grid-template-areas:"photo" "body" "price"; }
}
@media (max-width:480px){
  .device-card{ padding:22px; }
  .device-name{ font-size:1.5rem; }
}
.device-card-body{ grid-area:body; display:flex; flex-direction:column; gap:20px; align-self:center; }
.device-card-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.device-name{ font-size:1.9rem; font-weight:800; letter-spacing:-0.02em; margin:0; }
.device-name span{ color:var(--signal); }
.device-conn{ font-size:11.5px; font-weight:700; background:var(--bg-soft); border:1px solid var(--border); padding:6px 12px; border-radius:var(--radius-full); color:var(--text-muted); white-space:nowrap; }
.device-feats{ display:flex; flex-direction:column; gap:14px; }
.device-feat{ display:flex; align-items:flex-start; gap:12px; }
.device-feat-ico{
  width:36px; height:36px; border-radius:50%; background:var(--signal-dim); color:var(--signal);
  display:flex; align-items:center; justify-content:center; flex:none; border:1px solid rgba(250,30,78,0.28);
}
.device-feat b{ display:block; font-size:14px; font-weight:700; }
.device-feat span{ font-size:12.5px; color:var(--text-faint); }
.device-photo{ grid-area:photo; display:flex; align-items:center; justify-content:center; position:relative; min-width:0; }
.device-photo img{
  width:100%; max-width:220px; height:auto; filter:drop-shadow(0 18px 30px rgba(0,0,0,0.45));
  opacity:0; transform:translateY(24px) scale(.94); transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in .device-photo img{ opacity:1; transform:none; }
.device-card-full .device-photo img{ max-width:360px; }
.device-photo-multi{ gap:24px; min-width:0; }
.device-photo-multi img{ max-width:min(380px, 40%) !important; width:100%; }
.device-photo-secondary{ display:block; }
@media (max-width:900px){
  .device-photo-secondary{ display:none; }
  .device-photo-multi img{ max-width:280px !important; }
}
.device-price-bar{
  grid-area:price; margin-top:8px; background:linear-gradient(120deg, var(--signal), #c4123c); border-radius:var(--radius-md);
  padding:16px 20px; display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px;
  text-decoration:none; cursor:pointer; transition:filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.device-price-bar:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.device-price-bar .label{ font-size:11px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.85); }
.device-price-bar .amount{ font-size:1.7rem; font-weight:900; color:#fff; }
.device-price-bar .amount small{ font-size:12.5px; font-weight:600; }
.device-price-bar .note{ font-size:12px; color:rgba(255,255,255,0.85); display:flex; align-items:center; gap:6px; }
.device-price-bar .note svg{ flex:none; }
.device-trust{ grid-area:trust; display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }
.device-trust span{ font-size:11px; color:var(--text-faint); background:var(--bg-soft); border:1px solid var(--border); padding:6px 12px; border-radius:var(--radius-full); }

/* ===== Marca Blanca: hero Knox Track Pro + click + burst de apps ===== */
.wl-showcase{ display:flex; flex-direction:column; align-items:center; gap:0; }
.wlhero-stage{ display:flex; flex-direction:column; align-items:center; gap:8px; padding-bottom:22px; }
.wlhero-icon-wrap{
  position:relative; width:96px; height:96px; border-radius:26px; background:var(--surface);
  border:1px solid var(--border); box-shadow:var(--shadow-elev); display:flex; align-items:center; justify-content:center;
}
.wlhero-icon-img{ width:88px; height:88px; border-radius:22px; object-fit:cover; display:block; position:relative; z-index:2; }
.wl-showcase.play .wlhero-icon-img{ animation: wlheroIconPress 5.5s ease infinite; }
.wl-showcase.play .wlhero-icon-wrap{ animation: wlheroGlow 5.5s ease infinite; }
.wlhero-shock, .wlhero-ripple{
  position:absolute; inset:0; border-radius:26px; border:2px solid var(--signal); opacity:0; pointer-events:none;
}
.wl-showcase.play .wlhero-ripple{ animation: wlheroShock1 5.5s ease infinite; }
.wl-showcase.play .wlhero-shock{ animation: wlheroShock2 5.5s ease infinite; }
.wlhero-cursor{ position:absolute; top:50%; left:50%; opacity:0; pointer-events:none; z-index:3; filter:drop-shadow(0 2px 5px rgba(0,0,0,.5)); }
.wl-showcase.play .wlhero-cursor{ animation: wlheroCursorMove 5.5s ease infinite; }
.wlhero-label{ font-size:15px; font-weight:800; margin-top:6px; }
.wlhero-sub{ font-size:12.5px; color:var(--text-faint); }
.wlhero-arrow{ color:var(--text-faint); margin-top:6px; opacity:0; }
.wl-showcase.play .wlhero-arrow{ animation: wlheroArrow 5.5s ease infinite; }

@keyframes wlheroCursorMove{
  0%{ opacity:0; transform: translate(38%, -160%) scale(1); }
  9%{ opacity:1; transform: translate(38%, -160%) scale(1); }
  18%{ opacity:1; transform: translate(-50%, -50%) scale(1); }
  30%{ transform: translate(-50%, -50%) scale(0.86); }
  38%{ transform: translate(-50%, -50%) scale(1); }
  62%{ opacity:1; transform: translate(-50%, -50%) scale(1); }
  74%,100%{ opacity:0; transform: translate(-50%, -50%) scale(1); }
}
@keyframes wlheroIconPress{
  0%,20%{ transform: scale(1); }
  26%{ transform: scale(0.86); }
  33%{ transform: scale(1.08); }
  40%,100%{ transform: scale(1); }
}
@keyframes wlheroGlow{
  0%,20%{ box-shadow:0 0 0 0 rgba(250,30,78,0); }
  27%{ box-shadow:0 0 0 0 rgba(250,30,78,0.55); }
  40%{ box-shadow:0 0 36px 10px rgba(250,30,78,0.55); }
  60%{ box-shadow:0 0 18px 4px rgba(250,30,78,0.22); }
  100%{ box-shadow:0 0 0 0 rgba(250,30,78,0); }
}
@keyframes wlheroShock1{
  0%,22%{ opacity:0; transform:scale(0.6); }
  28%{ opacity:.75; transform:scale(0.9); }
  50%{ opacity:0; transform:scale(2.5); }
  100%{ opacity:0; transform:scale(2.5); }
}
@keyframes wlheroShock2{
  0%,27%{ opacity:0; transform:scale(0.6); }
  34%{ opacity:.55; transform:scale(0.9); }
  58%{ opacity:0; transform:scale(2.9); }
  100%{ opacity:0; transform:scale(2.9); }
}
@keyframes wlheroArrow{
  0%,20%{ opacity:0; transform:translateY(-4px); }
  30%,60%{ opacity:1; transform:translateY(4px); }
  74%,100%{ opacity:0; transform:translateY(-4px); }
}

/* ===== Marca Blanca: grid de apps que "salen" de Knox Track Pro ===== */
.wl-grid{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
  gap:24px 20px; max-width:900px; margin:0 auto; padding:0 8px;
}
.wl-item{
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  flex:0 0 84px; width:84px;
  opacity:0; transform:translateY(20px) scale(.7);
}
.wl-showcase.play .wl-item{
  animation: wl-item-burst 5.5s ease infinite;
}
.wl-item:nth-child(1){ animation-delay:0s; } .wl-item:nth-child(2){ animation-delay:.06s; }
.wl-item:nth-child(3){ animation-delay:.12s; } .wl-item:nth-child(4){ animation-delay:.18s; }
.wl-item:nth-child(5){ animation-delay:.24s; } .wl-item:nth-child(6){ animation-delay:.30s; }
.wl-item:nth-child(7){ animation-delay:.36s; } .wl-item:nth-child(8){ animation-delay:.42s; }
.wl-item:nth-child(9){ animation-delay:.48s; } .wl-item:nth-child(10){ animation-delay:.54s; }
.wl-item:nth-child(11){ animation-delay:.60s; } .wl-item:nth-child(12){ animation-delay:.66s; }
@keyframes wl-item-burst{
  0%,18%{ opacity:0; transform:translateY(20px) scale(.7); }
  30%,92%{ opacity:1; transform:translateY(0) scale(1); }
  100%{ opacity:0; transform:translateY(10px) scale(.85); }
}
.wl-item-icon{
  width:64px; height:64px; border-radius:18px; overflow:hidden; border:1px solid var(--border);
  box-shadow:var(--shadow-elev); transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.wl-item:hover .wl-item-icon{ transform:translateY(-5px) scale(1.06); border-color:var(--border-strong); }
.wl-item-icon img{ width:100%; height:100%; object-fit:cover; display:block; }
.wl-item span{ font-size:12px; font-weight:600; color:var(--text-muted); line-height:1.3; }