/* Reset */
* { box-sizing: border-box; }
html { margin: 0; padding: 0; width: 100%; overflow-x: hidden; }
body { 
  margin: 0; padding: 0; width: 100%; 
  font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif; 
  background: var(--custom-bg-light); 
  color: var(--custom-gray-dark); 
}

/* Navbar */
.navbar-bel { box-shadow: 0 2px 10px var(--custom-shadow-light); }
.navbar-bel .navbar-brand img { max-height: 3rem; height: auto; width: auto; }
@media (max-width: 768px) { .navbar-bel .navbar-brand img { max-height: 44px; } }
@media (max-width: 480px) { .navbar-bel .navbar-brand img { max-height: 36px; } }
.navbar-bel .navbar-nav .nav-link.active { font-weight: bold; color: var(--custom-teal) !important; }
.navbar-bel .navbar-nav .nav-link:hover { color: var(--custom-teal) !important; }

/* Hero - Full viewport, responsive */
.hero-bel { 
  position: relative; width: 100vw; margin-left: calc(-50vw + 50%); 
  min-height: 70vh; background: url('herofinal.png') center/cover no-repeat; 
  display: flex; align-items: center; text-align: left; 
}
.hero-bel::before { 
  content: ''; position: absolute; inset: 0; 
  background: rgba(0,0,0,0.45); z-index: 1; 
}
.hero-content { 
  position: relative; z-index: 2; color: var(--custom-white); 
  width: 100%; padding: 2rem 0; 
}

/* Hero inner - NO fixed width, usa container de Bootstrap */
.hero-inner { 
  width: 100%; max-width: 1320px; margin: 0 auto; 
  padding: 1.5rem 1rem; display: flex; align-items: center; 
  justify-content: space-between; gap: 2.5rem; 
}

.hero-text { flex: 1 1 auto; }
.hero-text h1 { 
  font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: 1rem; 
  line-height: 1.2; text-shadow: 0 2px 4px rgba(0,0,0,0.8); 
}
.hero-text p { 
  font-size: 1.2rem; margin-bottom: 0; max-width: 32rem; 
  text-shadow: 0 1px 3px rgba(0,0,0,0.7); 
}

/* Buttons */
.btn-teal { 
  border-radius: 8px; border: none; padding: 0.9rem 2rem; 
  font-size: 1.05rem; transition: all 0.2s; white-space: nowrap; 
  box-shadow: 0 4px 8px rgba(0,0,0,0.3); text-shadow: 0 1px 2px rgba(0,0,0,0.5); 
}
.btn-teal:hover, .btn-teal:focus { 
  background: var(--custom-teal-dark) !important; 
  box-shadow: 0 6px 12px rgba(0,0,0,0.4); transform: translateY(-1px); 
}

/* Responsive Hero */
@media (max-width: 992px) { 
  .hero-bel { min-height: 65vh; } 
  .hero-inner { flex-direction: column; align-items: flex-start; gap: 1.5rem; padding: 1rem; }
  .hero-text h1 { font-size: 2.3rem; }
}
@media (max-width: 576px) { 
  .hero-bel { min-height: 60vh; } 
  .hero-text h1 { font-size: 2rem; }
}

/* High-DPI phone scaling */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  .hero-inner { max-width: 100% !important; flex-direction: column !important; }
}

/* Routes section - Dynamic height based on content */
#cursos .row { 
  align-items: stretch; 
}

#cursos .col-12 > div {
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
  padding: 2rem 1.5rem !important;
}

#cursos .route-icon {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  margin: 0 auto 1rem;
}

#cursos h2 {
  flex-shrink: 0;
  margin-bottom: 1.5rem !important;
  font-size: 1.25rem !important;
}

#cursos .d-grid {
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  justify-content: flex-start;
}

#cursos .d-grid > div {
  flex: 0 0 auto;
  padding: 0.75rem 1rem !important;
  font-size: 0.95rem;
  line-height: 1.4;
  text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
  #cursos .col-12 > div {
    padding: 1.5rem 1rem !important;
  }
  #cursos .d-grid > div {
    font-size: 0.9rem;
    padding: 0.65rem 0.85rem !important;
  }
}