/* ===========================
   HEADER / NAVBAR (SRV) - BRAND
   =========================== */

/* Paleta SRV (desde el ícono) */
:root{
  --azul:#1788FF;            /* primario */
  --azul-osc:#0C63FF;        /* acento/hover fuerte */
  --naranja:#4099f8;         /* acento (marcador) */
  --verde:#16A34A;           /* acento secundario / estados OK */

  --nav-dark:#0d1a26;        /* barra superior */
  --nav-link:#111827;        /* links */
  --nav-link-muted:#6b7280;  /* reposo leve */
  --nav-border:#e5e7eb;      /* bordes suaves */
  

  /* CTA ahora usa marca (azul -> naranja) */
  --cta-grad-a: var(--azul);
  --cta-grad-b: var(--naranja);
}

/* Contenedor sticky general (tu JS agrega/remueve .stuck) */
.sticky-wrapper{
  position: sticky;
  top: 0;
  z-index: 1000;
}



/* ======= Top bar ======= */
.top-bar{
  /* leve degradé azul de marca para dar identidad */
  background: linear-gradient(90deg, var(--azul-osc), var(--azul));
  color: #E9F3FF;
  font-size: 0.9rem;
  font-weight: 700;   /* <<< negrita */
  line-height: 1;
  padding: .65rem 0;
}
.topbar-inner{
  width: min(1200px, 92%);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.topbar-inner .social-icons{
  display: flex;
  gap: .9rem;
  margin-left: auto;
}
.topbar-inner .social-icons a{
  color: #CFE6FF;
  transition: opacity .2s ease, transform .2s ease;
}
.topbar-inner .social-icons a:hover{ opacity: .9; transform: translateY(-1px) }
.topbar-inner > span{ opacity: .95 }

/* ======= Main nav ======= */
#main-header{
  background: #fff;
  border-bottom: 1px solid var(--nav-border);
}
#main-header .main-nav{
  width: min(1200px, 92%);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 64px;
  padding: .6rem 0;
}
/* Logo */
.logo img{
  height: 65px;
  display: block;
  transition: transform .25s ease;  /* animación suave */
}

.logo:hover img{
  transform: scale(1.08);  /* zoom leve */
}


/* Links */
.nav-links{
  list-style: none;
  display: flex;
  gap: 1.2rem;
  margin-left: auto;
  align-items: center;
}
.nav-links a{
  color: var(--nav-link);
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-weight: 600;
  font-size: .95rem;
  padding: .6rem .2rem;
  border-radius: .5rem;
  position: relative;
  transition: color .15s ease, background .15s ease;
}

/* subrayado sutil con color de marca al hover/active */
/* antes: .nav-links a::after { ... } */
/* subrayado solo para links normales, no el botón */
.nav-links a:not(.btn)::after{
  content:"";
  position:absolute; left:0; right:0; bottom:.25rem;
  height:2px; border-radius:2px;
  background: transparent;
  transform: scaleX(0);
  transition: transform .15s ease, background .15s ease;
}

/* HOVER solo a links normales */
.nav-links a:not(.btn):hover{
  color: var(--azul-osc);
  background: #f4f7ff;
}
.nav-links a:not(.btn):hover::after{
  background: var(--naranja);
  transform: scaleX(1);
}
.nav-links a:not(.btn).active{
  color: var(--azul-osc);
}
.nav-links a:not(.btn).active::after{
  background: var(--naranja);
  transform: scaleX(1);
}

/* Botón: mantiene su gradiente siempre */
.nav-links a.btn,
.nav-links a.btn:hover{
  background: linear-gradient(90deg, var(--cta-grad-a), var(--cta-grad-b));
  color:#fff !important;
  text-decoration:none !important;
}


.nav-links a:hover{
  color: var(--azul-osc);
  background: #f4f7ff;
}
.nav-links a:hover::after{
  background: var(--naranja);
  transform: scaleX(1);
}
.nav-links a.active{
  color: var(--azul-osc);
}
.nav-links a.active::after{
  background: var(--naranja);
  transform: scaleX(1);
}

/* Submenú */
/* el li que tiene submenu */
.has-submenu{
  position: relative;
}
.has-submenu > a::after{
  content: "▾";
  font-size: .8rem;
  margin-left: .35rem;
  color: var(--nav-link-muted);
}
/* dropdown separado y por encima del botón Contacto */
.submenu{
  position: absolute;
  top: calc(100% + 10px);     /* se ve el subrayado del link */
  left: 0;
  min-width: 230px;
  background: #fff;
  border: 1px solid var(--nav-border);
  border-radius: .7rem;
  padding: .4rem 0;
  list-style: none;
  display: none;
  box-shadow: 0 12px 24px rgba(15,23,42,.08);
  z-index: 1100;              /* por encima del botón */
}

/* puente antidesaparición: ocupa el gap de 10px */
.submenu::before{
  content: "";
  position: absolute;
  top: -10px;                 /* mismo valor que el gap */
  left: 0; right: 0;
  height: 10px;
  /* sin color; solo área “hoverable” */
}
/* mostrar submenu en hover y con teclado */
.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu{
  display: block;
}

.submenu a{
  display: block;
  color: var(--nav-link);
  padding: .7rem 1rem;
  font-weight: 600;
  font-size: .92rem;
}
.submenu a:hover{ background:#f4f7ff; color: var(--azul-osc); }
.has-submenu:hover .submenu{ display: block; }

/* Botón destacado (Contacto) */
.main-nav .btn{
  position: relative;
  z-index: 1000;
  margin-left: 1rem;
  padding: .6rem 1rem;
  border-radius: 999px;
  font-weight: 800;
  background: linear-gradient(90deg, var(--cta-grad-a), var(--cta-grad-b));
  color:#fff !important;
  text-decoration: none !important;   /* evita subrayado */
  box-shadow: 0 4px 12px rgba(23,136,255,.25); /* sombra más sutil */
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  display: inline-block;              /* asegura que se comporte como botón */
  
}

/* Hover */
.main-nav .btn:hover{
  transform: scale(1.08);  /* zoom leve */
  box-shadow: 0 6px 18px rgba(23,136,255,.35);
  filter: saturate(1.08);
  text-decoration: none !important;
  position: relative;        /* aísla cualquier ::after heredado */
  overflow: hidden;
}

/* Focus (accesibilidad sin brillo exagerado) */
.main-nav .btn:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(23,136,255,.4);
}


/* Hamburguesa (mobile) */
.hamburger{
  display: none;
  width: 28px; height: 22px;
  margin-left: auto;
  cursor: pointer;
}
.hamburger span{
  display: block;
  height: 3px;
  background: var(--azul-osc);
  border-radius: 3px;
  margin: 4px 0;
  transition: transform .2s ease, opacity .2s ease;
}

/* Sticky shadow al hacer scroll */
.sticky-wrapper.stuck #main-header{
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
}

/* ======= Responsive ======= */
@media (max-width: 980px){
  .topbar-inner,
  #main-header .main-nav{
    width: 92%;
  }

  .hamburger{ display: block; }
  .nav-links{
    position: absolute;
    right: 4%;
    top: calc(64px + 8px);
    background: #fff;
    border: 1px solid var(--nav-border);
    border-radius: .8rem;
    box-shadow: 0 16px 38px rgba(2,6,23,.12);
    padding: .6rem;
    display: none;
    flex-direction: column;
    min-width: 230px;
    z-index: 1001;
  }
  .nav-links.open{ display: flex; }

  .has-submenu:hover .submenu{ display: none; }
  .has-submenu .submenu{
    position: static;
    border: 0; border-top:1px dashed var(--nav-border);
    box-shadow: none; border-radius: 0; padding: .3rem 0 .2rem;
    display: none;
  }
  .has-submenu > a{ display:flex; justify-content:space-between; align-items:center; }
  .has-submenu > a:active + .submenu,
  .has-submenu > a:focus + .submenu{ display:block; }

  .main-nav .btn{ margin-left: 0; margin-top:.4rem; text-align:center; }
}

/* Accesibilidad: focus visible */
.nav-links a:focus,
.submenu a:focus,
.main-nav .btn:focus{
  outline: 3px solid #a3d0ff;
  outline-offset: 2px;
  border-radius:.5rem;
}

#main-header{
  position: sticky;   /* o -webkit-sticky si necesitás soporte viejo */
  top: 0;
  z-index: 1100;
  background: #fff;
}