/* ============================================================
   TELEMETRY INSIGHT · HEADER · línea promocional, navbar, dropdown de servicios
   ============================================================ */

/* ============================================================
   1 · LÍNEA PROMOCIONAL (ticker superior)
   ============================================================ */
.promo-bar{
  background:var(--brand-deep);
  color:var(--ink);
  border-bottom:1px solid color-mix(in srgb,var(--overlay) 8%,transparent);
  overflow:hidden;position:relative;height:38px;
  transition:background var(--tune);
  z-index:60;
}
.promo-track{
  display:flex;align-items:center;gap:64px;height:100%;
  white-space:nowrap;position:absolute;left:0;
  animation:ticker 34s linear infinite;
  will-change:transform;
}
.promo-track:hover{animation-play-state:paused}
.promo-item{display:inline-flex;align-items:center;gap:12px;font-size:.8rem;font-weight:500;letter-spacing:.02em}
.promo-item .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}
.promo-item strong{color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.74rem}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   2 · NAVBAR
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg-deep) 82%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid color-mix(in srgb,var(--overlay) 7%,transparent);
  transition:background var(--tune);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px}
/* ---------- LOGOTIPO OFICIAL ----------
   El logotipo horizontal (crema, con transparencia) se pinta por CSS
   usando su propia silueta como MÁSCARA sobre un bloque de color.
   El color lo controla la variable --ink:
     · Modo oscuro  → --ink es crema  (aspecto original de la marca)
     · Modo claro   → --ink es el color de la división (rojo/azul/teal)

   Se usa un <span class="brand-img"> (no un <img>) para que no haya
   ningún bitmap encima de la máscara. El nombre accesible lo da el
   aria-label del enlace .brand-logo.

   Fallback: si el navegador no soporta máscaras, se pinta el PNG como
   imagen de fondo, conservando su color crema original.
   Para cambiar el logotipo, reemplaza el PNG conservando el nombre. */
.brand-logo{display:flex;align-items:center;gap:13px}
/* ---------- LOGOTIPO A PRUEBA DE FALLOS ----------
   Se pinta con imágenes reales del logo, una por color, y se
   intercambian según el tema y la división. Sin máscaras ni filtros:
   así nunca desaparece aunque el navegador no soporte máscaras.
     · Oscuro         → versión crema (identidad original)
     · Claro + SHIELD → versión azul marino oficial
     · Claro + ARROW  → versión vino oficial
     · Claro + NABLA  → versión teal oficial
   Para cambiar el logo, reemplaza los PNG conservando el nombre. */
.brand-logo .brand-img{
  display:block;flex:none;
  height:40px;width:124px;                 /* proporción del logo 900×289 */
  background:no-repeat center/contain;
  background-image:url('../img/logo/telemetry-horizontal-cream.png');
  transition:opacity .22s,transform .22s;
}
body[data-theme="light"][data-division="shield"] .brand-logo .brand-img{background-image:url('../img/logo/telemetry-horizontal-shield.png')}
body[data-theme="light"][data-division="arrow"]  .brand-logo .brand-img{background-image:url('../img/logo/telemetry-horizontal-arrow.png')}
body[data-theme="light"][data-division="nabla"]  .brand-logo .brand-img{background-image:url('../img/logo/telemetry-horizontal-nabla.png')}
.brand-logo:hover .brand-img{opacity:.85;transform:translateY(-1px)}
.footer .brand-logo .brand-img{height:46px;width:143px}
/* En el footer (siempre oscuro), el logo se queda crema en ambos temas */
.footer .brand-logo .brand-img,
body[data-theme="light"] .footer .brand-logo .brand-img{background-image:url('../img/logo/telemetry-horizontal-cream.png')}
.brand-logo svg{width:34px;height:34px;flex:none}
.brand-logo .txt{line-height:1}
.brand-logo .txt b{font-family:var(--font-display);font-weight:500;font-size:1.02rem;letter-spacing:.14em;color:var(--ink);display:block}
.brand-logo .txt span{font-family:'Mont',sans-serif;font-weight:500;font-size:.6rem;letter-spacing:.42em;color:var(--brand-bright);transition:color var(--tune)}

.nav-links{display:flex;align-items:center;gap:6px}
.nav-links>li>a,.nav-links>li>button{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 15px;border-radius:9px;font-size:.88rem;font-weight:600;letter-spacing:.005em;
  color:var(--text-light);transition:background .18s,color .18s;
}
.nav-links>li>a:hover,.nav-links>li>button:hover{background:color-mix(in srgb,var(--overlay) 7%,transparent);color:var(--ink)}
.nav-cta{
  background:var(--brand)!important;color:var(--cream)!important;font-weight:700!important;
  box-shadow:0 4px 18px -6px var(--glow);transition:background var(--tune),transform .15s!important;
}
.nav-cta:hover{transform:translateY(-1px);background:var(--brand-bright)!important}
/* El texto del botón de Contacto permanece crema en ambos temas
   (evita rojo-sobre-rojo / azul-sobre-azul en modo claro) */
body[data-theme="light"] .nav-cta{color:var(--cream)!important}

/* Dropdown de Servicios / Contacto */
.has-drop{position:relative}
.drop-caret{transition:transform .2s}
.has-drop:hover .drop-caret,
.has-drop:focus-within .drop-caret{transform:rotate(180deg)}

/* PUENTE INVISIBLE — cubre el hueco entre el botón y el menú.
   Sin esto, al bajar el puntero se sale del área y el menú se cierra. */
.has-drop::after{content:"";position:absolute;left:-12px;right:-12px;top:100%;height:18px;z-index:69}

.drop{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(8px);
  width:min(680px,90vw);background:var(--bg-panel);
  border:1px solid color-mix(in srgb,var(--overlay) 12%,transparent);border-radius:16px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.7);
  padding:20px;opacity:0;visibility:hidden;
  transition:opacity .22s,visibility .22s,transform .22s var(--ease);
  z-index:70;
}
/* Se mantiene abierto mientras el cursor esté en el botón, en el puente
   o dentro del propio menú; también con navegación por teclado. */
.has-drop:hover .drop,
.has-drop:focus-within .drop,
.drop:hover{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 18px}
.drop-col h5{
  font-family:'Mont',sans-serif;font-size:.66rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;padding:6px 10px 10px;display:flex;align-items:center;gap:7px;
}
.drop-col h5 .chip{width:9px;height:9px;border-radius:3px}
.drop .c-shield{color:#5B8AD6}.drop .c-arrow{color:#E85A68}.drop .c-nabla{color:#5FB4D2}
.drop-col a{
  display:block;padding:7px 10px;border-radius:8px;font-size:.82rem;color:var(--text-mut);
  transition:background .15s,color .15s;
}
.drop-col a:hover{background:color-mix(in srgb,var(--overlay) 6%,transparent);color:var(--ink)}
.drop-col a .tag{font-size:.7rem;color:var(--accent);font-weight:700;letter-spacing:.05em;margin-left:5px;text-transform:uppercase}

/* Hamburguesa (móvil) */
.burger{display:none;flex-direction:column;gap:5px;padding:8px}
.burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.mobile-menu{display:none}

/* ---------- Dropdown de Contacto (correo + WhatsApp) ---------- */
.drop-contact{width:min(320px,88vw);padding:10px}
.contact-opt{display:flex;align-items:center;gap:14px;padding:13px 14px;border-radius:12px;
  transition:background .16s}
.contact-opt:hover{background:color-mix(in srgb,var(--overlay) 6%,transparent)}
.contact-opt .co-icon{width:42px;height:42px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center}
.contact-opt .co-icon svg{width:20px;height:20px}
.co-mail{background:color-mix(in srgb,var(--brand) 22%,transparent);color:var(--brand-bright)}
.co-wa{background:rgba(37,211,102,.16);color:#25D366}
.contact-opt .co-txt{display:flex;flex-direction:column;line-height:1.3}
.contact-opt .co-txt b{color:var(--ink);font-size:.92rem;font-weight:600}
.contact-opt .co-txt span{color:var(--text-mut);font-size:.8rem}
/* Contacto como CTA con caret */
.nav-links .nav-cta .drop-caret{margin-left:2px}

/* ============================================================
   BOTÓN DE TEMA (claro / oscuro)
   Muestra la luna en modo oscuro y el sol en modo claro.
   ============================================================ */
.nav-tools{display:flex;align-items:center}
.theme-btn{position:relative;width:40px;height:40px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--ink);
  background:color-mix(in srgb,var(--overlay) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--overlay) 16%,transparent);
  transition:background .22s,border-color .22s,transform .22s,color var(--theme-tune)}
.theme-btn:hover{background:color-mix(in srgb,var(--overlay) 16%,transparent);
  border-color:color-mix(in srgb,var(--gold) 55%,transparent);
  color:var(--gold-bright);transform:rotate(-12deg) scale(1.06)}
.theme-btn svg{width:18px;height:18px}
.tb-icon{position:absolute;display:flex;align-items:center;justify-content:center;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
/* En oscuro se ve la luna; en claro, el sol */
body[data-theme="dark"]  .tb-sun {opacity:0;transform:rotate(-90deg) scale(.5)}
body[data-theme="dark"]  .tb-moon{opacity:1;transform:none}
body[data-theme="light"] .tb-sun {opacity:1;transform:none}
body[data-theme="light"] .tb-moon{opacity:0;transform:rotate(90deg) scale(.5)}
@media(max-width:900px){ .nav-tools{display:none} }

/* ---------- Acentos dorados (solo detalles) ---------- */
.promo-item strong{color:var(--gold-bright)}
.promo-item .dot{background:var(--gold)}

/* ============================================================
   ZONAS QUE SIEMPRE VAN SOBRE FONDO OSCURO
   El ticker conserva el azul/vino profundo de la división en
   ambos temas, así que su texto debe permanecer claro siempre.
   ============================================================ */
.promo-bar{color:#EFE7DC}
.promo-item{color:#EFE7DC}
.promo-item strong{color:var(--gold-bright)}
body[data-theme="light"] .promo-bar{border-bottom-color:rgba(0,0,0,.12)}

/* ---------- Botón de idioma ---------- */
.lang-btn{display:flex;align-items:center;gap:6px;height:40px;padding:0 13px;border-radius:100px;
  cursor:pointer;color:var(--ink);
  background:color-mix(in srgb,var(--overlay) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--overlay) 16%,transparent);
  transition:background .22s,border-color .22s,color .22s,transform .22s}
.lang-btn:hover{background:color-mix(in srgb,var(--overlay) 16%,transparent);
  border-color:color-mix(in srgb,var(--gold) 55%,transparent);
  color:var(--gold-bright);transform:translateY(-1px)}
.lang-btn svg{width:17px;height:17px}
.lb-code{font-family:'Mont',sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.08em}
.nav-tools{display:flex;align-items:center;gap:9px}