/* =================== 0) Variables & Reset =================== */
:root{
  --primary-900:#0B1741;
  --primary-700:#002b5c;
  --accent-500:#f75008;
  --accent-300:#ffddc1;
  --brand-cta:#0056b3;
  --brand-cta-hover:#004a99;
  --text-900:#222;
  --text-600:#5f6b7a;
  --bg-100:#f2f2f2;
  --white:#fff;
  --shadow-sm:0 2px 6px rgba(0,0,0,.1);
  --shadow-md:0 4px 15px rgba(0,0,0,.2);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

/* =================== 1) Base & Helpers =================== */
body{
  font-family:'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  background-color: var(--bg-100);
  color: var(--text-900);
  margin:0;
  padding-top:110px; /* espacio si topbar + navbar sticky */
}

a{
  color:#0069d9;
  text-decoration:none;
  transition: color .2s ease-in-out;
}
a:hover{ color:#0056b3; }

.shadow-sm{ box-shadow: var(--shadow-sm) !important; }
.rounded-10{ border-radius:10px; }

/* =================== 2) Layout =================== */
.container{ max-width:1200px; margin:0 auto; }

/* =================== 3) Topbar =================== */
.topbar{
  background: var(--primary-900);
  color: var(--white);
  font-size:.95rem;
  padding:6px 0;
  position:relative;
  z-index:1040; /* por encima de navbar/slider */
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar a{ color:#fff; text-decoration:none; margin-left:10px; }
.topbar a:hover{ text-decoration:underline; }
.topbar i{ color: var(--accent-300); margin-right:5px; }
.logo-institucional{ height:60px; }
.topbar .social-icons a{ color:#fff; font-size:1rem; margin-left:10px; }
.topbar .social-icons a:hover{ color: var(--accent-500); }

/* =================== 4) Navbar =================== */
.navbar-wrapper{ background:#fff; }
.navbar-wrapper.sticky-top{ z-index:1035; }
.navbar{
  background-color: var(--primary-900) !important;
  padding:10px 0;
  border-radius:10px;
  box-shadow: var(--shadow-sm);
}
.navbar-brand img{ height:50px; }
.navbar-nav .nav-link{
  color: var(--white) !important;
  font-weight:700;
  text-transform:capitalize;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{ color: var(--accent-300) !important; }

/* botón opcional en navbar (Bootstrap vars) */
.navbar .btn-outline-light{
  --bs-btn-color:#fff;
  --bs-btn-border-color:#fff;
  --bs-btn-hover-color:var(--primary-900);
  --bs-btn-hover-bg:#fff;
  --bs-btn-hover-border-color:#fff;
}

/* =================== 5) Hero/Slider =================== */
#homeCarousel{ margin-top:10px; }
#homeCarousel .carousel-inner{ border-radius:12px; box-shadow: var(--shadow-md); }
#homeCarousel .carousel-item{ height:65vh; min-height:360px; position:relative; overflow:hidden; }
#homeCarousel .carousel-item img{
  width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
}
#homeCarousel .carousel-item::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom, rgba(0,16,46,.35), rgba(0,16,46,.55));
}
#homeCarousel .carousel-caption{
  z-index:2; bottom:12%;
  text-shadow:0 2px 8px rgba(0,0,0,.45);
}
#homeCarousel .carousel-caption h5{ font-size:clamp(1.25rem,2.5vw,2rem); font-weight:700; }
#homeCarousel .carousel-caption p{ font-size:clamp(.95rem,2vw,1.1rem); }
#homeCarousel .carousel-control-prev-icon,
#homeCarousel .carousel-control-next-icon{ filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
#homeCarousel .carousel-indicators [data-bs-target]{ background:#fff; width:10px; height:10px; opacity:.7; }
#homeCarousel .carousel-indicators .active{ opacity:1; }

/* =================== 6) Botones =================== */
.btn-primary{
  background-color: var(--brand-cta);
  border-color: var(--brand-cta-hover);
}
.btn-primary:hover{
  background-color: var(--brand-cta-hover);
  border-color:#003d80;
}

/* =================== 7) Footer =================== */
.footer{
  background: var(--primary-700);
  color:#fff;
  padding:30px 0;
  text-align:center;
  font-size:14px;
}

/* =================== 8) Animación tarjetas =================== */
.hover-lift { transition: transform .25s ease, box-shadow .25s ease; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 8px 18px rgba(0,0,0,.15); }

/* =================== 9) Responsivo =================== */
@media (max-width:991px){
  .navbar-nav .nav-link{ margin:10px 0; }
}
@media (max-width:576px){
  #homeCarousel .carousel-item{ height:48vh; min-height:260px; }
  #homeCarousel .carousel-caption{ bottom:8%; padding:0 12px; }
}