/* =========================
   🎨 INSTRACVIAL CORPORATE UI
========================= */

:root{
  --instracvial-azul-oscuro:#0b1f3a;
  --instracvial-azul:#163a6b;
  --instracvial-azul-claro:#2f6fd6;
  --instracvial-blanco:#ffffff;
  --instracvial-gris:#f4f7fb;
}

/* ===== BODY GENERAL ===== */

body{
  background: linear-gradient(135deg,#f4f7fb,#e9f0ff);
  font-family:'Segoe UI', Tahoma, sans-serif;
}

/* ===== HEADER MODERNO ===== */

.container-header{
  background: linear-gradient(90deg,
    var(--instracvial-azul-oscuro),
    var(--instracvial-azul)
  );
  box-shadow:0 5px 25px rgba(0,0,0,.25);
}

/* ===== LOGO ===== */

.navbar-brand img{
  max-height:65px;
  transition:all .3s ease;
}

.navbar-brand img:hover{
  transform:scale(1.05);
}

/* ===== MENU PRINCIPAL ===== */

.navbar-nav .nav-link{
  color:white !important;
  font-weight:600;
  padding:12px 18px !important;
  border-radius:8px;
  transition:all .3s ease;
}

/* Hover elegante */
.navbar-nav .nav-link:hover{
  background:rgba(255,255,255,.15);
  transform:translateY(-2px);
}

/* Activo */
.navbar-nav .active > .nav-link{
  background: linear-gradient(90deg,
    var(--instracvial-azul-claro),
    var(--instracvial-azul)
  );
  box-shadow:0 5px 15px rgba(0,0,0,.25);
}

/* ===== MEGA EFECTO SUBRAYADO ===== */

.nav-link{
  position:relative;
}

.nav-link::after{
  content:'';
  position:absolute;
  bottom:5px;
  left:50%;
  width:0%;
  height:2px;
  background:white;
  transition:.3s;
}

.nav-link:hover::after{
  width:70%;
  left:15%;
}

/* ===== TARJETAS CORPORATIVAS ===== */

.card{
  border:none;
  border-radius:18px;
  box-shadow:0 10px 35px rgba(0,0,0,.1);
  transition:.3s;
}

.card:hover{
  transform:translateY(-6px);
}

/* ===== BOTONES CORPORATIVOS ===== */

.btn-primary{
  background:linear-gradient(90deg,
    var(--instracvial-azul),
    var(--instracvial-azul-claro)
  );
  border:none;
  border-radius:12px;
  padding:12px 22px;
  font-weight:600;
  box-shadow:0 5px 15px rgba(0,0,0,.2);
}

.btn-primary:hover{
  transform:translateY(-2px);
}

/* ===== FOOTER MODERNO ===== */

.container-footer{
  background:var(--instracvial-azul-oscuro);
  color:white;
  padding:30px;
}

/* ===== SCROLL SUAVE ===== */

html{
  scroll-behavior:smooth;
}
/* ===== HEADER FONDO CLARO ===== */

.container-header{
    background:#ffffff !important;
    background-image:none !important;
    box-shadow:0 3px 12px rgba(0,0,0,.08);
}

/* Si existe barra superior */
.topbar{
    background:#ffffff !important;
}

/* ===== LOGO SIN DEFORMAR ===== */

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

/* ===== CONTENEDOR LOGO ===== */

.navbar-brand{
    display:flex;
    align-items:center;
    padding:8px 0;
}

/* ===== ESPACIADO GENERAL HEADER ===== */

.container-header .container{
    min-height:80px;
    display:flex;
    align-items:center;
}
.navbar-brand img{
    aspect-ratio: auto;
}
.container-header{
    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #f5f8ff 100%
    ) !important;
}