/* FRANJA a sangre: ocupa el ancho completo de la ventana a cualquier
   resolución. Ya no escala ni se limita a 1440px —eso lo hace ahora la
   caja de dentro—, así que por encima del ancho de referencia el color
   sigue llegando de borde a borde en vez de dejar blanco a los lados.

   El alto lo pone el propio contenido: desde que la caja interior ya no
   escala, su alto de layout coincide con el que se ve, asi que no hace
   falta fijarlo. --nav-h se sigue midiendo, pero solo para reservar hueco
   en el body.

   Sin overflow:hidden a propósito: el desplegable de "Soluciones" cuelga
   por debajo de la barra y se recortaría. */
.navbar{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  /* Blanco, no el frost (#F7FCFF) de antes. El velo del hero funde a blanco
     puro, asi que el frost dejaba una linea horizontal a todo el ancho justo
     bajo la barra: un salto de color minimo, pero un borde recto se nota
     igual. Con los dos en blanco la transicion desaparece.

     La separacion al bajar la sigue dando la sombra, que es cuando de
     verdad hace falta distinguir la barra del contenido. */
  background:var(--white);
  padding:0;                           /* el espaciado lo pone .navbar__inner */
  box-shadow:none;                     /* la sombra solo la pone el JS al bajar */
  transition:transform .4s cubic-bezier(.4,0,.2,1),box-shadow .3s ease;
}

.navbar.hidden{transform:translateY(-100%);}

.floating-logo{
  position:fixed;top:12px;left:12px;z-index:1001;
  opacity:0;visibility:hidden;
  /* Nativo, como el resto del nav: es su mini-logo y quedaria raro que
     encogiera mientras la barra se queda quieta. */
  transform:translateY(-20px);
  transition:opacity .4s cubic-bezier(.4,0,.2,1),
             transform .4s cubic-bezier(.4,0,.2,1),
             visibility .4s;
  pointer-events:none;
}

.floating-logo.visible{
  opacity:1;visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}

.floating-logo-img{
  height:80px;width:auto;cursor:pointer;
  transform:rotate(-90deg);transform-origin:center center;
  /* rotate() no altera la caja de layout: seguiría midiendo 238x80 y
     la marca girada se montaría sobre el CoreBot. Estos márgenes
     intercambian ancho y alto — 79px = (238-80)/2 con el ratio del SVG. */
  margin:79px -79px;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.1));
}

.floating-corebot{
  width:40px;height:auto;
  margin-top:-15px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.15));
  animation:corebot-bounce 2s ease-in-out infinite;
}

/* Caja de 1440px centrada, a TAMAÑO NATIVO.

   Ya no lleva transform:scale. Antes seguía la escala del lienzo y por eso
   la barra cambiaba de tamaño al redimensionar o hacer zoom; ahora se
   queda estable y solo escala el contenido central.

   El max-width mantiene el contenido centrado y alineado consigo mismo a
   cualquier resolución; la franja de color la pone .navbar, que va al
   100% del viewport. */
.navbar__scale{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
}

.navbar__inner{
  max-width:1400px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:85px;
  padding:25px 80px;
}

.brand{line-height:0;flex:none;}

.brand img{height:70px;width:auto;object-fit:contain;}

.nav-menu{display:flex;flex:1;align-items:center;justify-content:center;gap:24px;}

.nav-menu > li > a{
  font-family:var(--font-ui);font-weight:500;font-size:16px;
  color:var(--secondary-grey);
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 0;position:relative;transition:color .2s ease;
}

.nav-menu > li > a::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--primary-blue);transition:width .25s ease;
}

.nav-menu > li > a:hover{color:var(--primary-blue);}

.nav-menu > li > a:hover::after{width:100%;}

.caret{font-size:11px;line-height:1;transition:transform .25s ease;}

.has-drop{position:relative;}

.dropdown{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
  background:var(--white);border-radius:12px;
  box-shadow:0 12px 34px rgba(33,39,42,.16);
  padding:10px;min-width:250px;
  opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility .2s;
}

.has-drop:hover .dropdown,.has-drop:focus-within .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}

.has-drop:hover .caret{transform:rotate(180deg);}

.dropdown a{display:block;padding:10px 14px;border-radius:8px;font-size:15px;font-weight:500;transition:background .2s ease,color .2s ease;}

.dropdown a:hover{background:var(--secondary-frost);color:var(--primary-blue);}

.nav-cta{display:flex;flex-direction:column;align-items:center;gap:4px;}

@keyframes swing-center{
  0%,100%{transform:rotate(0deg);}
  25%    {transform:rotate(2.5deg);}
  75%    {transform:rotate(-2.5deg);}
}

.cta-swing-button{
  transform-origin:center center;
  animation:swing-center 3s ease-in-out infinite;
}

.cta-swing-button:hover{animation-play-state:paused;}

.btn-vuln{
  display:inline-block;width:auto;max-width:210px;
  background:var(--primary-blue);color:var(--white);
  border-radius:12px;padding:10px 28px;
  font-family:var(--font-din);font-size:14px;font-weight:700;letter-spacing:.48px;
  white-space:nowrap;text-align:center;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}

.btn-vuln:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,85,183,.3);background:#00479b;}

.nav-cta__note{
  font-family:var(--font-ui);font-size:11px;font-weight:300;letter-spacing:3px;
  text-align:center;color:var(--secondary-grey);
  max-width:200px;line-height:1.3;white-space:normal;
}

.nav-toggle{display:none;flex-direction:column;gap:5px;padding:8px;}

.nav-toggle span{display:block;width:26px;height:2px;background:var(--secondary-grey);transition:transform .25s ease,opacity .25s ease;}

.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}

.nav-toggle.is-open span:nth-child(2){opacity:0;}

.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.navbar{opacity:0;}

@media (prefers-reduced-motion:reduce){
  .navbar,.hero__text,.hero__actions,.hero__media{opacity:1 !important;transform:none !important;}
}

@media (max-width:768px){
  .navbar__inner{gap:40px;padding:25px 40px;}
  .nav-menu{gap:20px;}
  .floating-logo{top:8px;left:4px;transform-origin:left top;}
  .floating-logo.visible{transform:scale(.6) translateY(0);}
  .floating-logo:not(.visible){transform:scale(.6) translateY(-20px);}
}

@media (max-width:768px){
  .nav-menu > li > a{padding:11px 0;}
  .dropdown a{padding:12px 14px;}
  .btn-vuln{padding:12px 28px;}
}

@media (max-width:768px){
  .navbar__inner{gap:16px;justify-content:space-between;flex-wrap:wrap;padding:16px 24px;}
  .brand img{height:50px;}
  .nav-toggle{display:flex;}
  .nav-menu{display:none;order:3;width:100%;flex:none;flex-direction:column;align-items:flex-start;
    gap:4px;padding-top:12px;border-top:1px solid rgba(193,199,205,.5);margin-top:12px;}
  .nav-menu.is-open{display:flex;}
  .nav-menu > li{width:100%;}
  .nav-menu > li > a{width:100%;padding:12px 0;font-size:17px;justify-content:space-between;}
  .nav-menu > li > a::after{display:none;}
  .dropdown{position:static;transform:none;opacity:1;visibility:visible;
    box-shadow:none;padding:0 0 8px 12px;min-width:0;display:none;}
  .has-drop.is-open .dropdown{display:block;}
  .has-drop:hover .dropdown{transform:none;}
  .dropdown a{padding:13px 14px;}
  .nav-cta{order:4;width:100%;display:none;}
  .nav-cta.is-open{display:flex;margin-top:10px;padding-bottom:6px;}
  .btn-vuln{width:100%;max-width:none;padding:13px 28px;}
  .caret{font-size:15px;}
  .nav-cta__note{font-size:13px;letter-spacing:2px;max-width:none;}
  .nav-toggle{padding:0;min-width:44px;min-height:44px;
    align-items:center;justify-content:center;flex:none;}
  .nav-toggle span{position:relative;}
  .nav-menu.is-open{max-height:calc(100vh - 160px);overflow-y:auto;}
  .floating-logo{display:none;}
  .cta-swing-button{width:100%;animation:none;transform:none;}
}

@media (max-width:480px){
  .navbar__inner{padding:12px 18px;}
  .brand{display:flex;align-items:center;min-height:44px;}
  .brand img{height:42px;}
}

/* ── Móvil: sin escalado ────────────────────────────────────
   Va al FINAL del archivo a propósito. Estaba arriba, antes de la regla
   base de .navbar, y como las dos tienen la misma especificidad ganaba la
   última: por debajo del umbral la barra seguía midiendo --maxw (1440px)
   y desbordaba la ventana. A 886px eso son 554px de más, que es
   exactamente el desbordamiento que se estaba viendo. */
@media (max-width:768px){
  /* El menu desplegado hace crecer la barra, asi que el alto tiene que
     seguir siendo el natural. Hoy ya lo es por defecto —ni la franja ni la
     caja interior fijan alto—, pero se deja explicito por si alguien vuelve
     a ponerlo. */
  .navbar{height:auto;}
  .navbar.hidden{transform:translateY(-100%);}
}