/* ============================================ */
/* CORRECCIONES CRITICAS - AGENTE DEVOPS        */
/* Fecha: 2026-06-29                            */
/* ============================================ */

/* --- 1. LOGO NAVBAR --- */
#main-nav .container { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.navbar-header { display: flex !important; align-items: center !important; min-height: 78px !important; }
.navbar-brand {
  height: auto !important;
  padding: 10px 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
.navbar-brand img {
  width: auto !important;
  max-width: 268px !important;
  max-height: 72px !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: left center !important;
  display: block !important;
  image-rendering: -webkit-optimize-contrast;
}

/* --- 2. NAVBAR oscuro corporativo --- */
#main-nav.navbar-default { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important; border-bottom: 2px solid #48B1DF !important; box-shadow: 0 2px 20px rgba(0,0,0,0.3) !important; }
.navbar-default .navbar-nav > li > a { color: #ffffff !important; font-weight: 500 !important; }
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li.active > a { color: #48B1DF !important; background: rgba(72, 177, 223, 0.15) !important; }
.client-access-btn { background: linear-gradient(45deg, #48B1DF, #2c8cb3) !important; color: #ffffff !important; border: none !important; border-radius: 25px !important; padding: 10px 20px !important; font-weight: 600 !important; }

#main-nav .navbar-collapse {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

#main-nav .navbar-nav {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

#main-nav .navbar-nav > li {
  margin: 0 !important;
}

#main-nav .navbar-nav > li > a.nav-link-pill {
  padding: 11px 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #f7fbff !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

#main-nav .navbar-nav > li > a.nav-link-pill:hover,
#main-nav .navbar-nav > li.active > a.nav-link-pill,
#main-nav .navbar-nav > li > a.nav-link-pill:focus {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(72, 177, 223, 0.24), rgba(44, 140, 179, 0.32)) !important;
  border-color: rgba(72, 177, 223, 0.48) !important;
  box-shadow: 0 10px 24px rgba(10, 24, 40, 0.22) !important;
  transform: translateY(-1px);
}

.navbar-nav > li.nav-cta {
  margin-left: 4px !important;
}

.client-access-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  padding: 11px 22px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(72, 177, 223, 0.35) !important;
  background: linear-gradient(135deg, #5ec7f2 0%, #2c8cb3 55%, #1f6d9a 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  box-shadow: 0 12px 28px rgba(44, 140, 179, 0.28) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}

.client-access-btn:hover,
.client-access-btn:focus {
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 34px rgba(44, 140, 179, 0.32) !important;
  filter: brightness(1.04) !important;
}

/* --- 3. HERO LOGO tamano correcto --- */
.hero-banner-logo-wrap { display: flex !important; justify-content: center !important; align-items: center !important; margin: 0 auto 24px !important; max-width: 360px !important; padding: 20px 28px !important; border-radius: 18px !important; background: rgba(255, 255, 255, 0.16) !important; backdrop-filter: blur(8px) !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; }
.hero-banner-logo { display: block !important; width: 260px !important; max-width: 260px !important; height: auto !important; max-height: 92px !important; object-fit: contain !important; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.28)) !important; }

/* --- 4. CONTRASTE textos oscuros en fondos claros --- */
#features, #services, #portfolio, #clients, #about, #contact { background: #ffffff !important; }
#features h2, #features h3, #features h4, #services h2, #services h3, #services h4, #portfolio h2, #portfolio h3, #portfolio h4, #clients h2, #clients h3, #clients h4, #about h2, #about h3, #about h4, #contact h2, #contact h3, #contact h4, .section-title { color: #0f3460 !important; }
#features p, #services p, #portfolio p, #clients p, #about p, #contact p, .media.service-box p, .media.service-box h4, .pricing li, .pricing strong, .pricing .plan-name, .pricing .price { color: #282828 !important; }
.section-header p, .section-header .wow, .media.service-box .media-heading, .media.service-box p { color: #3b4656 !important; }

/* Pricing */
#pricing { background: #f8f9fa !important; }
#pricing h2, #pricing h3, #pricing .section-title, #pricing .price, #pricing .plan-name { color: #0f3460 !important; }
#pricing p, #pricing li { color: #282828 !important; }

/* --- 5. CONTACTO maquetacion corregida --- */
#contact-us { background: linear-gradient(135deg, #0f3460 0%, #16213e 50%, #1a1a2e 100%) !important; padding: 88px 0 36px !important; text-align: center !important; }
#contact-us .section-title { color: #ffffff !important; font-size: 44px !important; margin-bottom: 20px !important; border-bottom-color: rgba(255,255,255,0.16) !important; }
#contact-us .section-title:before { background: rgba(72, 177, 223, 0.9) !important; }
#contact-us p { color: rgba(255,255,255,0.88) !important; font-size: 18px !important; max-width: 720px !important; margin: 0 auto !important; }
#contact { background: #eef3f8 !important; padding: 68px 0 74px !important; }
#contact .container.contact-info { max-width: 1140px !important; width: 100% !important; }
#contact .row { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; }
#contact .contact-form { height: 100% !important; background: #ffffff !important; padding: 32px !important; border-radius: 18px !important; box-shadow: 0 14px 34px rgba(10, 24, 40, 0.08) !important; border: 1px solid rgba(15, 52, 96, 0.08) !important; }
#contact h3 { color: #0f3460 !important; margin-bottom: 25px !important; font-size: 24px !important; border-bottom: 2px solid #48B1DF !important; padding-bottom: 10px !important; display: inline-block !important; }
#contact address, #contact .contact-form p { color: #2f3743 !important; font-size: 16px !important; line-height: 1.8 !important; }
#contact address strong { color: #0f3460 !important; font-size: 18px !important; }
#contact abbr { color: #48B1DF !important; font-weight: bold !important; }
.alert-container { margin-bottom: 24px !important; }
.contact-form form { background: transparent !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.contact-form .form-control { border: 1px solid #d6dee8 !important; border-radius: 10px !important; padding: 14px 16px !important; font-size: 15px !important; color: #282828 !important; background: #ffffff !important; margin-bottom: 15px !important; }
.contact-form .form-control:focus { border-color: #48B1DF !important; box-shadow: 0 0 0 3px rgba(72, 177, 223, 0.15) !important; }
.contact-form .form-control::placeholder { color: #999 !important; }
.contact-form button.btn-primary { border-radius: 999px !important; padding: 12px 22px !important; font-weight: 700 !important; min-width: 180px !important; }

/* --- 5b. BLOG legibilidad y assets --- */
#blog-content, .blog-card, .blog-card-body, .blog-sidebar { background: #ffffff !important; }
.blog-card h2, .blog-card h2 a, .blog-sidebar h3, .blog-sidebar li a, .blog-sidebar p { color: #0f3460 !important; }
.blog-card p, .blog-card-meta, .blog-sidebar ul li a, .blog-sidebar p, .blog-sidebar .tag { color: #445063 !important; }
.blog-card-meta { color: #2c8cb3 !important; }
.blog-card-img { background: #dfe9f4 !important; }

/* --- 6. FOOTER --- */
#footer { background: #1a1a2e !important; color: #ffffff !important; padding: 30px 0 !important; border-top: 2px solid #48B1DF !important; }
#footer a, #footer li, #footer .social-icons a { color: #ffffff !important; }

/* --- 7. RESPONSIVE --- */
@media (max-width: 768px) {
  #main-nav .container { display: block !important; }
  .navbar-header { min-height: 66px !important; }
  .navbar-brand img { max-width: 196px !important; max-height: 54px !important; }
  #main-nav .navbar-nav {
    display: block !important;
    margin: 10px 0 0 !important;
  }
  #main-nav .navbar-nav > li {
    margin-bottom: 8px !important;
  }
  #main-nav .navbar-nav > li > a.nav-link-pill,
  .client-access-btn {
    width: 100% !important;
    justify-content: center !important;
  }
  .hero-banner-logo { width: 210px !important; max-width: 210px !important; max-height: 72px !important; }
  #contact .row { display: block !important; }
  #contact .row > div { margin-bottom: 30px !important; }
  #contact .contact-form { padding: 24px !important; }
}