:root{--blue:#2daeff;--blue2:#67caff;--bg:#04070b;--text:#f3f5f7;--muted:#a0abb5;--line:rgba(255,255,255,.09)}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;overflow-x:hidden}a{text-decoration:none;color:inherit}
.topbar{position:fixed;z-index:30;left:0;right:0;top:0;height:72px;padding:0 6vw;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,rgba(3,6,10,.92),rgba(3,6,10,.18));backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.045)}
.brand{font-size:20px;font-weight:800;font-style:italic;letter-spacing:-.7px}.brand span{color:var(--blue)}.brand-mark{display:inline-grid;place-items:center;width:27px;height:27px;margin-right:7px;border:2px solid var(--blue);border-radius:50%;font-size:13px;font-style:normal}.brand em{font-style:normal;font:8px monospace;letter-spacing:1px;color:var(--blue);border:1px solid rgba(45,174,255,.4);padding:3px 6px;margin-left:7px;vertical-align:3px}
nav{display:flex;gap:34px;color:#b0b8c0;font-size:11px}nav a:hover{color:#fff}.nav-download{border:1px solid rgba(45,174,255,.48);padding:11px 17px;border-radius:5px;font-size:10px;font-weight:700}.nav-download span{color:var(--blue);font-size:14px;margin-left:7px}
.hero{height:100vh;min-height:760px;position:relative;overflow:hidden;display:flex;align-items:center;padding:100px 7vw 50px}.hero-photo{position:absolute;inset:-2%;z-index:-4;background:url("assets/cockpit.jpg") center/cover no-repeat;filter:brightness(.58) saturate(.72);transform:scale(1.03);transition:transform .1s linear}.hero-shade{position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,rgba(2,5,8,.96) 0%,rgba(2,5,8,.82) 31%,rgba(2,5,8,.12) 68%,rgba(2,5,8,.45) 100%),linear-gradient(0deg,rgba(4,7,11,.92),transparent 34%,rgba(0,0,0,.35))}
.hero-copy{width:42%;max-width:560px;z-index:3}.eyebrow,.section-label{color:var(--blue);font:10px monospace;letter-spacing:2.7px}.hero h1{font-size:clamp(50px,5.6vw,82px);line-height:.94;letter-spacing:-4px;margin:19px 0 22px;text-transform:uppercase}.hero h1 strong{color:var(--blue)}.hero p{max-width:470px;color:#b8c0c8;font-size:14px;line-height:1.75}.hero-actions{display:flex;gap:10px;margin-top:28px}.button{display:inline-block;padding:14px 19px;border-radius:5px;font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase}.primary{background:var(--blue);color:#021018}.primary:hover{background:var(--blue2)}.ghost{border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.18)}.ghost:hover{border-color:var(--blue)}.facts{display:flex;align-items:center;gap:13px;margin-top:27px;color:#8d98a3;font:9px monospace;letter-spacing:1.2px}.facts i{width:1px;height:10px;background:var(--line)}
.live-dashboard{position:absolute;z-index:4;right:6vw;top:51%;transform:translateY(-45%) rotate(-1.1deg);width:min(570px,46vw);padding:22px;border-radius:12px;background:linear-gradient(145deg,rgba(5,10,15,.94),rgba(2,6,10,.91));border:1px solid rgba(170,205,225,.24);box-shadow:0 40px 100px rgba(0,0,0,.75),0 0 60px rgba(45,174,255,.06);transition:transform .18s ease-out}
.dash-head{display:flex;justify-content:space-between;color:#6e7b87;font:8px monospace;letter-spacing:1px}.connected{color:#5ee49b}.connected b{display:inline-block;width:6px;height:6px;border-radius:50%;background:#36d77c;box-shadow:0 0 8px #36d77c;margin-right:4px}
.gauges{display:grid;grid-template-columns:1fr 1.16fr 1fr;gap:10px;align-items:center;padding:25px 3px}.gauge{position:relative;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 50%,#091018 0 54%,#03070b 55%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.06),0 0 22px rgba(0,0,0,.7)}.gauge:before{content:"";position:absolute;inset:4%;border-radius:50%;background:conic-gradient(from 220deg,var(--blue) 0 238deg,rgba(255,255,255,.09) 238deg 360deg);mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 0)}.gauge-left:before,.gauge-right:before{background:conic-gradient(from 220deg,var(--blue) 0 190deg,#e93d42 190deg 235deg,rgba(255,255,255,.08) 235deg 360deg);mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0)}.gauge-main{box-shadow:inset 0 0 0 2px rgba(255,255,255,.07),0 0 35px rgba(45,174,255,.12)}.ticks{position:absolute;inset:11%;border-radius:50%;border:1px dashed rgba(255,255,255,.22)}.needle{position:absolute;left:50%;bottom:50%;width:2px;height:40%;transform-origin:50% 100%;transform:rotate(-42deg);background:#fff;z-index:3;filter:drop-shadow(0 0 4px rgba(255,255,255,.6));transition:transform .12s linear}.needle span{position:absolute;bottom:-5px;left:-4px;width:10px;height:10px;border-radius:50%;background:#111820;border:2px solid var(--blue)}.gauge-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center;z-index:2}.gauge-center strong{font:26px monospace;color:#f4f6f8}.gauge-center small{margin-top:4px;color:#77838e;font:7px monospace;letter-spacing:1px}.gauge-main .gauge-center strong{font-size:45px;letter-spacing:-2px}.gauge-main .gauge-center small{font-size:8px;color:#9aa6b0}
.dash-bottom{display:grid;grid-template-columns:1fr 1.15fr 1fr;border-top:1px solid var(--line);padding-top:17px}.dash-bottom>div{padding:0 12px;border-right:1px solid var(--line);position:relative}.dash-bottom>div:last-child{border:0}.dash-bottom span{color:#6c7883;font-size:12px}.dash-bottom small{display:block;color:#687580;font:7px monospace;margin-top:4px}.dash-bottom strong{display:block;margin-top:5px;font:14px monospace}.fuel-line{display:block;height:3px;background:#18232c;margin-top:7px}.fuel-line b{display:block;width:78%;height:100%;background:var(--blue);box-shadow:0 0 8px rgba(45,174,255,.5)}
.scroll-cue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:#71808d;font:8px monospace;letter-spacing:3px}.scroll-cue span{display:block;width:28px;height:1px;background:var(--blue);margin:8px auto 0}
.intro-section,.simple-section{width:min(1120px,calc(100% - 40px));margin:auto;padding:125px 0}.intro-section h2,.simple-section h2,.download-box h2{font-size:clamp(40px,5vw,62px);line-height:.94;letter-spacing:-3px;margin-top:13px;text-transform:uppercase}h2 strong{color:var(--blue)}.intro-section>p{color:var(--muted);font-size:13px;line-height:1.75;max-width:550px;margin-top:15px}.dashboard-previews{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}.dashboard-previews article{background:#05090d;border:1px solid var(--line);border-radius:8px;overflow:hidden;transition:.25s}.dashboard-previews article:hover{border-color:rgba(45,174,255,.35);transform:translateY(-3px)}.dashboard-previews img{width:100%;display:block;aspect-ratio:1.54;object-fit:cover;object-position:center}.dashboard-previews article>div{display:flex;align-items:center;justify-content:space-between;padding:14px 15px}.dashboard-previews b{font-size:13px}.dashboard-previews span{color:#64717d;font:8px monospace;letter-spacing:1px}
.simple-section{border-top:1px solid var(--line)}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:90px;margin-top:48px;align-items:start}.two-col p{max-width:430px;color:var(--muted);font-size:13px;line-height:1.8;margin-top:17px}.steps div{display:flex;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}.steps b{color:var(--blue);font:10px monospace}.steps span{font-size:13px;color:#bdc5cc}
.download-section{padding:125px 20px;background:#070b10;border-top:1px solid var(--line)}.download-box{max-width:900px;margin:auto;text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:65px 20px}.download-box p{color:var(--muted);font-size:13px;margin-top:14px}.download-box .button{margin-top:28px}footer{display:flex;justify-content:space-between;padding:24px 6vw;color:#5f6b76;font:9px monospace;border-top:1px solid var(--line)}
@media(max-width:950px){nav{display:none}.hero{min-height:950px;align-items:flex-start;padding:125px 25px 30px}.hero-copy{width:100%;max-width:560px}.live-dashboard{left:25px;right:25px;top:auto;bottom:55px;width:auto;transform:rotate(-.5deg)}.dashboard-previews,.two-col{grid-template-columns:1fr}.dashboard-previews{max-width:600px}.two-col{gap:40px}}
@media(max-width:600px){.hero{padding-left:20px;padding-right:20px}.hero h1{font-size:47px;letter-spacing:-2.5px}.hero p{font-size:13px}.hero-actions{flex-wrap:wrap}.live-dashboard{left:15px;right:15px;padding:14px}.gauges{gap:4px;padding:18px 0}.gauge-center strong{font-size:18px}.gauge-main .gauge-center strong{font-size:30px}.dash-bottom{grid-template-columns:1fr 1fr}.dash-bottom>div:last-child{display:none}.facts{gap:8px}.intro-section,.simple-section{padding:90px 0}.dashboard-previews{margin-top:34px}.download-section{padding:90px 15px}footer{flex-direction:column;gap:9px;text-align:center}}


/* =========================================================
   DASHCORE — PREMIUM TYPOGRAPHY + RESPONSIVE POLISH
   ========================================================= */

:root {
  --font-ui: "Manrope", "Segoe UI", Arial, sans-serif;
}

/* Manrope gives the interface a softer, less aggressive appearance. */
html,
body,
button,
input,
textarea,
select {
  font-family: var(--font-ui);
}

body {
  font-weight: 500;
  letter-spacing: -0.01em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.brand,
.brand-name,
.hero h1,
.intro-section h2,
.simple-section h2,
.download-box h2 {
  font-family: var(--font-ui);
}

.hero h1 {
  font-weight: 700;
  letter-spacing: -0.045em;
}

.intro-section h2,
.simple-section h2,
.download-box h2 {
  font-weight: 700;
  letter-spacing: -0.04em;
}

.hero p,
.intro-section > p,
.two-col p,
.download-box p {
  font-weight: 400;
  letter-spacing: -0.005em;
}

.eyebrow,
.section-label,
.facts,
.dash-head,
.gauge-center small,
.dash-bottom small,
.nav-download,
.scroll-cue {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}


/* =========================================================
   FOOTER — MÁS LIMPIO Y PREMIUM
   ========================================================= */

.site-footer {
  width: 100%;
  padding: 0 6vw;
  background:
    linear-gradient(180deg, #070b10 0%, #04070b 100%);
  border-top: 1px solid rgba(255,255,255,.07);
  color: #7d8994;
}

.footer-main {
  min-height: 112px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 35px;
  border-bottom: 1px solid rgba(255,255,255,.055);
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #eef2f5;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.footer-brand > span span {
  color: var(--blue);
}

.footer-logo {
  width: 29px !important;
  height: 29px !important;
  min-width: 29px !important;
  max-width: 29px !important;
  min-height: 29px !important;
  max-height: 29px !important;
  object-fit: contain;
}

.footer-tagline {
  margin: 0;
  color: #697681;
  font-size: 11px;
  font-weight: 500;
}

.footer-links {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
}

.footer-links a {
  color: #78848e;
  font-size: 10px;
  font-weight: 600;
  transition: color .2s ease;
}

.footer-links a:hover {
  color: #fff;
}

.footer-bottom {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #4f5c67;
  font-size: 9px;
  font-weight: 500;
}

.footer-signature {
  color: #7c8892;
  letter-spacing: .02em;
}

.footer-signature strong {
  color: #cbd3d9;
  font-weight: 700;
}


/* =========================================================
   TABLETS
   601px — 1100px
   ========================================================= */

@media (min-width: 601px) and (max-width: 1100px) {

  .topbar {
    height: 68px;
    padding: 0 4vw;
  }

  .brand-logo {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    max-width: 31px !important;
    min-height: 31px !important;
    max-height: 31px !important;
  }

  nav {
    gap: 18px;
  }

  nav a {
    font-size: 10px;
  }

  .nav-download {
    padding: 10px 13px;
  }

  .hero {
    min-height: 900px;
    padding: 110px 5vw 40px;
  }

  .hero-copy {
    width: 47%;
    max-width: 460px;
  }

  .hero h1 {
    font-size: clamp(45px, 6vw, 66px);
    letter-spacing: -0.05em;
  }

  .hero p {
    max-width: 400px;
    font-size: 13px;
  }

  .live-dashboard {
    right: 4vw;
    width: min(480px, 48vw);
    padding: 17px;
  }

  .gauges {
    gap: 7px;
    padding: 21px 2px;
  }

  .gauge-main .gauge-center strong {
    font-size: 38px;
  }

  .gauge-center strong {
    font-size: 22px;
  }

  .dash-bottom strong {
    font-size: 12px;
  }

  .intro-section,
  .simple-section {
    width: min(900px, calc(100% - 64px));
    padding: 100px 0;
  }

  .dashboard-previews {
    gap: 12px;
  }

  .two-col {
    gap: 55px;
  }

  .site-footer {
    padding: 0 4vw;
  }
}


/* =========================================================
   TELÉFONOS
   Hasta 600px
   ========================================================= */

@media (max-width: 600px) {

  body {
    overflow-x: hidden;
  }

  .topbar {
    height: 62px;
    padding: 0 16px;
    background: rgba(3,6,10,.88);
  }

  .brand {
    gap: 7px !important;
  }

  .brand-logo {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
  }

  .brand-name {
    font-size: 17px;
  }

  .brand em {
    font-size: 7px;
    padding: 2px 5px;
  }

  nav {
    display: none;
  }

  .nav-download {
    padding: 8px 10px;
    font-size: 8px;
    border-radius: 5px;
  }

  .nav-download span {
    font-size: 12px;
    margin-left: 4px;
  }


  /* HERO */

  .hero {
    min-height: 900px;
    height: 100svh;
    padding: 105px 18px 28px;
    align-items: flex-start;
  }

  .hero-photo {
    background-position: 58% center;
    filter: brightness(.48) saturate(.62);
  }

  .hero-shade {
    background:
      linear-gradient(
        180deg,
        rgba(2,5,8,.90) 0%,
        rgba(2,5,8,.62) 36%,
        rgba(2,5,8,.78) 67%,
        rgba(4,7,11,.98) 100%
      );
  }

  .hero-copy {
    width: 100%;
    max-width: 100%;
    z-index: 5;
  }

  .eyebrow {
    font-size: 8px;
    letter-spacing: 2px;
  }

  .hero h1 {
    max-width: 360px;
    margin: 14px 0 16px;
    font-size: clamp(39px, 11vw, 52px);
    line-height: .98;
    letter-spacing: -0.055em;
  }

  .hero p {
    max-width: 330px;
    font-size: 12px;
    line-height: 1.65;
  }

  .hero-actions {
    margin-top: 20px;
    gap: 8px;
  }

  .button {
    padding: 12px 14px;
    font-size: 8px;
    letter-spacing: .55px;
  }

  .facts {
    margin-top: 19px;
    gap: 8px;
    font-size: 7px;
    letter-spacing: 1px;
  }


  /* DASHBOARD MÓVIL:
     No se superpone al texto y queda centrado. */

  .live-dashboard {
    left: 14px;
    right: 14px;
    bottom: 42px;
    top: auto;
    width: auto;
    padding: 12px;
    border-radius: 10px;
    transform: rotate(-.35deg);
  }

  .dash-head {
    font-size: 6px;
  }

  .gauges {
    gap: 4px;
    padding: 14px 0 13px;
  }

  .gauge {
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.06),
      0 12px 28px rgba(0,0,0,.55);
  }

  .ticks {
    inset: 10%;
  }

  .needle {
    height: 39%;
  }

  .gauge-center strong {
    font-size: 16px;
  }

  .gauge-center small {
    font-size: 5px;
    margin-top: 2px;
  }

  .gauge-main .gauge-center strong {
    font-size: 28px;
  }

  .gauge-main .gauge-center small {
    font-size: 6px;
  }

  .dash-bottom {
    grid-template-columns: 1fr 1fr;
    padding-top: 11px;
  }

  .dash-bottom > div {
    padding: 0 7px;
  }

  .dash-bottom > div:last-child {
    display: none;
  }

  .dash-bottom span {
    font-size: 9px;
  }

  .dash-bottom small {
    font-size: 5px;
    margin-top: 2px;
  }

  .dash-bottom strong {
    font-size: 10px;
    margin-top: 3px;
  }

  .fuel-line {
    height: 2px;
    margin-top: 5px;
  }

  .scroll-cue {
    bottom: 12px;
    font-size: 6px;
    letter-spacing: 2px;
  }


  /* SECCIONES */

  .intro-section,
  .simple-section {
    width: calc(100% - 36px);
    padding: 78px 0;
  }

  .section-label {
    font-size: 8px;
    letter-spacing: 2px;
  }

  .intro-section h2,
  .simple-section h2,
  .download-box h2 {
    font-size: clamp(36px, 10vw, 46px);
    letter-spacing: -0.055em;
    line-height: .98;
  }

  .intro-section > p {
    font-size: 12px;
    line-height: 1.7;
    max-width: 330px;
  }

  .dashboard-previews {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 32px;
  }

  .dashboard-previews article {
    width: 100%;
    border-radius: 8px;
  }

  .dashboard-previews img {
    aspect-ratio: 1.55;
  }

  .dashboard-previews article > div {
    padding: 12px 13px;
  }

  .dashboard-previews b {
    font-size: 12px;
  }

  .dashboard-previews span {
    font-size: 7px;
  }


  /* CONEXIÓN */

  .two-col {
    grid-template-columns: 1fr;
    gap: 34px;
    margin-top: 35px;
  }

  .two-col p {
    font-size: 12px;
    line-height: 1.7;
    max-width: 330px;
  }

  .steps div {
    gap: 15px;
    padding: 15px 0;
  }

  .steps b {
    font-size: 8px;
  }

  .steps span {
    font-size: 12px;
  }


  /* DESCARGA */

  .download-section {
    padding: 78px 18px;
  }

  .download-box {
    padding: 48px 12px;
  }

  .download-box p {
    font-size: 12px;
  }


  /* FOOTER */

  .site-footer {
    padding: 0 18px;
  }

  .footer-main {
    min-height: 0;
    padding: 30px 0 25px;
    grid-template-columns: 1fr;
    gap: 13px;
    text-align: center;
  }

  .footer-brand {
    justify-content: center;
    font-size: 16px;
  }

  .footer-logo {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    max-width: 27px !important;
    min-height: 27px !important;
    max-height: 27px !important;
  }

  .footer-tagline {
    font-size: 10px;
  }

  .footer-links {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-top: 3px;
  }

  .footer-links a {
    font-size: 9px;
  }

  .footer-bottom {
    min-height: 0;
    padding: 18px 0 22px;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    font-size: 8px;
  }

  .footer-signature {
    order: -1;
    font-size: 9px;
  }
}


/* =========================================================
   TELÉFONOS MUY PEQUEÑOS
   ========================================================= */

@media (max-width: 380px) {

  .hero {
    min-height: 850px;
    padding-top: 96px;
  }

  .hero h1 {
    font-size: 37px;
  }

  .hero p {
    max-width: 290px;
    font-size: 11px;
  }

  .nav-download {
    padding: 7px 8px;
  }

  .live-dashboard {
    left: 10px;
    right: 10px;
    bottom: 38px;
    padding: 10px;
  }

  .gauge-main .gauge-center strong {
    font-size: 25px;
  }

  .gauge-center strong {
    font-size: 14px;
  }

  .dash-bottom strong {
    font-size: 9px;
  }

  .intro-section,
  .simple-section {
    width: calc(100% - 28px);
  }
}


/* =========================================================
   LANDSCAPE EN TELÉFONOS
   Evita que el Hero quede aplastado.
   ========================================================= */

@media (max-width: 900px) and (orientation: landscape) {

  .hero {
    min-height: 720px;
    height: auto;
    padding-top: 92px;
  }

  .hero-copy {
    max-width: 48%;
  }

  .hero h1 {
    font-size: 38px;
  }

  .hero p {
    max-width: 350px;
  }

  .live-dashboard {
    width: min(420px, 47vw);
    right: 3vw;
    bottom: 28px;
  }

  .scroll-cue {
    display: none;
  }
}


/* =========================================================
   REDUCED MOTION
   Respeta las preferencias de accesibilidad.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}