/* ═══════════════════════════════════════════════
   VALIDANET — NAV COMPARTIDO v2.0
   Pegar este <style> en el <head> de cada página
   ═══════════════════════════════════════════════ */
:root{
  --vn-navy:#0f172a;--vn-navy2:#1e293b;--vn-navy3:#334155;
  --vn-green:#7ab31a;--vn-green2:#96d422;
  --vn-orange:#f47920;--vn-orange2:#ff9240;
  --vn-muted:#94a3b8;--vn-border:rgba(255,255,255,.08);
  --vn-h:64px;
}
.vn-nav{
  background:var(--vn-navy);height:var(--vn-h);
  display:flex;align-items:center;padding:0 40px;
  justify-content:space-between;position:sticky;top:0;z-index:200;
  border-bottom:1px solid var(--vn-border);
}
.vn-logo{display:flex;align-items:center;gap:8px;text-decoration:none;}
.vn-logo img{height:34px;}
.vn-logo-badge{
  font-size:11px;font-weight:700;letter-spacing:.5px;
  background:rgba(122,179,26,.15);border:1px solid rgba(122,179,26,.3);
  color:var(--vn-green);padding:2px 8px;border-radius:99px;
}
.vn-links{display:flex;align-items:center;gap:4px;flex:1;justify-content:center;}
.vn-links a{
  color:var(--vn-muted);text-decoration:none;font-size:14px;font-weight:500;
  padding:6px 12px;border-radius:8px;transition:color .15s,background .15s;
}
.vn-links a:hover{color:#fff;background:rgba(255,255,255,.06);}
.vn-links a.active{color:#fff;}
.vn-sep{width:1px;height:20px;background:var(--vn-border);margin:0 8px;}
/* Dropdown */
.vn-dd{position:relative;}
.vn-dd>a{display:flex;align-items:center;gap:5px;}
.vn-dd>a::after{
  content:'';width:5px;height:5px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s;
}
.vn-dd:hover>a::after{transform:rotate(-135deg) translateY(-2px);}
.vn-dd-menu{
  position:absolute;top:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(-4px);
  background:var(--vn-navy2);border:1px solid var(--vn-border);
  border-radius:12px;padding:6px;min-width:220px;
  box-shadow:0 16px 40px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .15s,transform .15s;
}
.vn-dd:hover .vn-dd-menu{
  opacity:1;visibility:visible;pointer-events:all;
  transform:translateX(-50%) translateY(0);
}
.vn-dd-menu a{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:8px;font-size:13px;
  color:var(--vn-muted)!important;transition:background .15s,color .15s;
}
.vn-dd-menu a:hover{background:rgba(255,255,255,.06);color:#fff!important;}
.vn-dd-menu a .dmi{
  width:28px;height:28px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;
}
.vn-dd-menu a strong{display:block;font-size:13px;color:#fff;font-weight:600;}
.vn-dd-menu a span{font-size:11px;color:var(--vn-muted);}
.vn-dd-sep{height:1px;background:var(--vn-border);margin:4px 0;}
/* Actions */
.vn-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.btn-vn-ghost{
  color:var(--vn-muted);text-decoration:none;font-size:14px;font-weight:600;
  padding:7px 14px;border-radius:8px;border:1px solid var(--vn-border);
  transition:color .15s,border-color .15s;
}
.btn-vn-ghost:hover{color:#fff;border-color:rgba(255,255,255,.2);}
.btn-vn-green{
  background:var(--vn-green);color:#0f172a!important;font-size:13px;font-weight:700;
  padding:8px 18px;border-radius:8px;text-decoration:none;
  transition:background .15s,transform .1s;
}
.btn-vn-green:hover{background:var(--vn-green2);transform:translateY(-1px);}
.btn-vn-orange{
  background:var(--vn-orange);color:#fff!important;font-size:13px;font-weight:700;
  padding:8px 18px;border-radius:8px;text-decoration:none;
  transition:background .15s,transform .1s;
}
.btn-vn-orange:hover{background:var(--vn-orange2);transform:translateY(-1px);}
/* Mobile */
.vn-burger{
  display:none;flex-direction:column;gap:5px;cursor:pointer;
  padding:4px;background:none;border:none;
}
.vn-burger span{width:22px;height:2px;background:var(--vn-muted);border-radius:2px;}
.vn-mob{
  display:none;position:fixed;top:var(--vn-h);left:0;right:0;
  background:var(--vn-navy2);border-bottom:1px solid var(--vn-border);
  padding:12px 16px;z-index:199;flex-direction:column;gap:2px;
}
.vn-mob.open{display:flex;}
.vn-mob a{
  color:var(--vn-muted);text-decoration:none;font-size:14px;font-weight:500;
  padding:10px 14px;border-radius:8px;transition:color .15s,background .15s;
  display:flex;align-items:center;gap:8px;
}
.vn-mob a:hover{color:#fff;background:rgba(255,255,255,.06);}
.vn-mob-sep{height:1px;background:var(--vn-border);margin:4px 0;}
/* Footer compartido */
.vn-footer{
  background:var(--vn-navy);color:#475569;padding:40px;
  text-align:center;font-size:13px;
}
.vn-footer .vn-footer-logo{color:#fff;font-weight:800;font-size:18px;display:block;margin-bottom:14px;}
.vn-footer .vn-footer-logo em{color:var(--vn-green);font-style:normal;}
.vn-footer .vn-footer-links{
  display:flex;gap:20px;justify-content:center;
  margin-bottom:14px;flex-wrap:wrap;
}
.vn-footer .vn-footer-links a{color:#475569;text-decoration:none;transition:color .15s;}
.vn-footer .vn-footer-links a:hover{color:var(--vn-green);}
@media(max-width:768px){
  .vn-nav{padding:0 16px;}
  .vn-links{display:none;}
  .vn-sep{display:none;}
  .vn-actions .btn-vn-ghost{display:none;}
  .vn-burger{display:flex;}
}

/* ══════════════════════════
   HTML SNIPPET — TIPO: MAIN (validanet.cl)
   ══════════════════════════
<nav class="vn-nav">
  <a href="https://validanet.cl" class="vn-logo">
    <img src="https://app.validanet.cl/static/logo-validanet.png" alt="ValidaNet" style="height:34px;">
  </a>
  <div class="vn-links">
    <a href="https://validanet.cl/#features">Funciones</a>
    <a href="https://validanet.cl/#addons">Addons</a>
    <a href="https://validanet.cl/#pricing">Precios</a>
    <div class="vn-dd">
      <a href="https://connect.validanet.cl/portal/connect">Connect</a>
      <div class="vn-dd-menu">
        <a href="https://connect.validanet.cl/portal/connect">
          <div class="dmi" style="background:rgba(29,233,199,.1);">🌐</div>
          <div><strong>Portal Connect</strong><span>Red de capacitación laboral</span></div>
        </a>
        <div class="vn-dd-sep"></div>
        <a href="https://validanet.cl/connect/empresa">
          <div class="dmi" style="background:rgba(244,121,32,.1);">🏢</div>
          <div><strong>Para Empresas</strong><span>Publica solicitudes de capacitación</span></div>
        </a>
        <a href="https://validanet.cl/connect/relator">
          <div class="dmi" style="background:rgba(122,179,26,.1);">👨‍🏫</div>
          <div><strong>Para Relatores</strong><span>Ofrece tus cursos y servicios</span></div>
        </a>
        <a href="https://connect.validanet.cl/portal/connect#instituciones">
          <div class="dmi" style="background:rgba(148,100,220,.1);">🎓</div>
          <div><strong>Para Instituciones</strong><span>OTECs, CFT, IP, universidades y más</span></div>
        </a>
      </div>
    </div>
    <div class="vn-sep"></div>
  </div>
  <div class="vn-actions">
    <a href="https://app.validanet.cl/api/validanet/dashboard/" class="btn-vn-ghost">Ingresar</a>
    <a href="https://app.validanet.cl/api/validanet/dashboard/#register" class="btn-vn-green">Comenzar gratis →</a>
  </div>
  <button class="vn-burger" onclick="this.closest('nav').nextElementSibling.classList.toggle('open')" aria-label="Menú">
    <span></span><span></span><span></span>
  </button>
</nav>
<div class="vn-mob">
  <a href="https://validanet.cl/#features">⚡ Funciones</a>
  <a href="https://validanet.cl/#addons">🧩 Addons</a>
  <a href="https://validanet.cl/#pricing">💰 Precios</a>
  <div class="vn-mob-sep"></div>
  <a href="https://connect.validanet.cl/portal/connect">🌐 Portal Connect</a>
  <a href="https://validanet.cl/connect/empresa">🏢 Para Empresas</a>
  <a href="https://validanet.cl/connect/relator">👨‍🏫 Para Relatores</a>
  <a href="https://connect.validanet.cl/portal/connect#instituciones">🎓 Para Instituciones</a>
  <div class="vn-mob-sep"></div>
  <a href="https://app.validanet.cl/api/validanet/dashboard/">🔐 Ingresar</a>
  <a href="https://app.validanet.cl/api/validanet/dashboard/#register" style="color:#7ab31a;font-weight:700;">🚀 Comenzar gratis →</a>
</div>

   TIPO: CONNECT PORTAL (connect.validanet.cl/portal/connect)
   ══════════════════════════
<nav class="vn-nav">
  <a href="https://connect.validanet.cl/portal/connect" class="vn-logo">
    <img src="https://app.validanet.cl/static/logo-validanet.png" alt="ValidaNet" style="height:34px;">
    <span class="vn-logo-badge">Connect</span>
  </a>
  <div class="vn-links">
    <a href="https://connect.validanet.cl/portal/connect#buscar">Buscar cursos</a>
    <a href="https://connect.validanet.cl/portal/connect#instituciones">Instituciones</a>
    <a href="https://validanet.cl/#features">ValidaNet SaaS</a>
    <div class="vn-sep"></div>
    <a href="https://validanet.cl/connect/empresa" style="color:#f47920;">🏢 Soy empresa</a>
    <a href="https://validanet.cl/connect/relator" style="color:#7ab31a;">👨‍🏫 Soy relator</a>
    <div class="vn-sep"></div>
  </div>
  <div class="vn-actions">
    <a href="https://app.validanet.cl/api/validanet/dashboard/" class="btn-vn-ghost">Ingresar</a>
    <a href="https://validanet.cl/connect/empresa/registro" class="btn-vn-orange">Publicar solicitud</a>
  </div>
  <button class="vn-burger" onclick="this.closest('nav').nextElementSibling.classList.toggle('open')" aria-label="Menú">
    <span></span><span></span><span></span>
  </button>
</nav>
<div class="vn-mob">
  <a href="https://connect.validanet.cl/portal/connect#buscar">🔍 Buscar cursos</a>
  <a href="https://connect.validanet.cl/portal/connect#instituciones">🎓 Instituciones</a>
  <div class="vn-mob-sep"></div>
  <a href="https://validanet.cl/connect/empresa">🏢 Soy empresa</a>
  <a href="https://validanet.cl/connect/relator">👨‍🏫 Soy relator</a>
  <div class="vn-mob-sep"></div>
  <a href="https://app.validanet.cl/api/validanet/dashboard/">🔐 Ingresar</a>
  <a href="https://validanet.cl/connect/empresa/registro" style="color:#f47920;font-weight:700;">📝 Publicar solicitud →</a>
</div>

   TIPO: EMPRESA (/connect/empresa)
   ══════════════════════════
<nav class="vn-nav">
  <a href="https://connect.validanet.cl/portal/connect" class="vn-logo">
    <img src="https://app.validanet.cl/static/logo-validanet.png" alt="ValidaNet" style="height:34px;">
    <span class="vn-logo-badge">Connect</span>
  </a>
  <div class="vn-links">
    <a href="https://validanet.cl">ValidaNet.cl</a>
    <a href="https://connect.validanet.cl/portal/connect">Portal</a>
    <a href="https://validanet.cl/connect/relator">👨‍🏫 Soy relator</a>
    <div class="vn-sep"></div>
  </div>
  <div class="vn-actions">
    <a href="https://app.validanet.cl/api/validanet/dashboard/" class="btn-vn-ghost">Ingresar</a>
    <a href="https://validanet.cl/connect/empresa/registro" class="btn-vn-orange">Publicar solicitud →</a>
  </div>
  <button class="vn-burger" onclick="this.closest('nav').nextElementSibling.classList.toggle('open')" aria-label="Menú">
    <span></span><span></span><span></span>
  </button>
</nav>
<div class="vn-mob">
  <a href="https://validanet.cl">🏠 ValidaNet.cl</a>
  <a href="https://connect.validanet.cl/portal/connect">🌐 Portal Connect</a>
  <a href="https://validanet.cl/connect/relator">👨‍🏫 Soy relator</a>
  <div class="vn-mob-sep"></div>
  <a href="https://app.validanet.cl/api/validanet/dashboard/">🔐 Ingresar</a>
  <a href="https://validanet.cl/connect/empresa/registro" style="color:#f47920;font-weight:700;">📝 Publicar solicitud →</a>
</div>

   TIPO: RELATOR (/connect/relator)
   ══════════════════════════
<nav class="vn-nav">
  <a href="https://connect.validanet.cl/portal/connect" class="vn-logo">
    <img src="https://app.validanet.cl/static/logo-validanet.png" alt="ValidaNet" style="height:34px;">
    <span class="vn-logo-badge">Connect</span>
  </a>
  <div class="vn-links">
    <a href="https://validanet.cl">ValidaNet.cl</a>
    <a href="https://connect.validanet.cl/portal/connect">Portal</a>
    <a href="https://validanet.cl/connect/empresa">🏢 Soy empresa</a>
    <div class="vn-sep"></div>
  </div>
  <div class="vn-actions">
    <a href="https://app.validanet.cl/api/validanet/dashboard/" class="btn-vn-ghost">Ingresar</a>
    <a href="https://validanet.cl/connect/relator/registro" class="btn-vn-green">Crear perfil gratis →</a>
  </div>
  <button class="vn-burger" onclick="this.closest('nav').nextElementSibling.classList.toggle('open')" aria-label="Menú">
    <span></span><span></span><span></span>
  </button>
</nav>
<div class="vn-mob">
  <a href="https://validanet.cl">🏠 ValidaNet.cl</a>
  <a href="https://connect.validanet.cl/portal/connect">🌐 Portal Connect</a>
  <a href="https://validanet.cl/connect/empresa">🏢 Soy empresa</a>
  <div class="vn-mob-sep"></div>
  <a href="https://app.validanet.cl/api/validanet/dashboard/">🔐 Ingresar</a>
  <a href="https://validanet.cl/connect/relator/registro" style="color:#7ab31a;font-weight:700;">✨ Crear perfil gratis →</a>
</div>

   FOOTER compartido
   ══════════════════════════
<footer class="vn-footer">
  <span class="vn-footer-logo">Valida<em>Net</em></span>
  <div class="vn-footer-links">
    <a href="https://validanet.cl">Inicio</a>
    <a href="https://validanet.cl/#addons">Addons</a>
    <a href="https://validanet.cl/#pricing">Precios</a>
    <a href="https://connect.validanet.cl/portal/connect">Connect</a>
    <a href="https://validanet.cl/connect/empresa">Empresas</a>
    <a href="https://validanet.cl/connect/relator">Relatores</a>
    <a href="https://app.validanet.cl/api/validanet/dashboard/">Dashboard</a>
    <a href="https://app.validanet.cl/legal/terminos">Términos</a>
    <a href="https://app.validanet.cl/legal/privacidad">Privacidad</a>
    <a href="mailto:contacto@validanet.cl">Contacto</a>
  </div>
  <p>© 2026 Norteduc Edtech SpA · RUT 76.624.932-9 · Antofagasta, Chile</p>
  <p style="font-size:11px;margin-top:6px;color:#334155;">Desarrollado con ❤️ en Antofagasta para toda Latinoamérica</p>
</footer>
*/
