/* style.css */
body { font-family: 'Montserrat', sans-serif; margin:0; padding:0; }
.navbar-brand img { height: 80px; }
.site-footer img { height: 150px; margin-bottom: 1rem; }
.navbar-nav .nav-link { text-transform: uppercase; font-weight: 400; }
.btn-primary { text-transform: uppercase; font-weight: 700; background-color: #fff260; border-color: #fff260; color: #0e1839; }
.btn-primary:hover { background-color: #e6d353; border-color: #e6d353; color: #0e1839; }

/* Hero */
.hero { position: relative; background: url('../img/hero-tech-bg.png') no-repeat center center; background-size: cover; color: #fff; height: 100vh; display: flex; align-items: center; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(14,24,57,0.6); }
.hero-content { position: relative; z-index: 2; }

/* Text */
.text-justify { text-align: justify; }

/* Cards */
.card { border: 1px solid #ddd; border-radius: 0.75rem; padding: 1.5rem; background-color: #f8f9fa; transition: transform 0.3s ease; }
.card:hover { transform: translateY(-8px); box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15); }
.icon-circle { width: 60px; height: 60px; background-color: #0e1839; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; color: #fff; }
.icon-circle i { font-size: 2.5rem; }

/* Sections */
#services { background-color: #f8f9fa; padding: 4rem 0; }
#hosting { background-color: #f0f4f8; padding: 4rem 0; }

/* Footer */
.site-footer { background-color: #0e1839; color: #fff; padding: 40px 0; }
.site-footer a { color: #458cb7; text-decoration: none; }
.site-footer a:hover { color: #1d657d; }
.site-footer .social-icon { color: #fff260; font-size: 1.5rem; margin-right: 0.5rem; }
.site-footer .social-icon:hover { color: #e6d353; }
.site-footer .contact-info .bi { color: #458cb7; margin-right: 0.5rem; }

/* Feature cards */
.feature-card {
  background-color: #ffffff;
  border-radius: .75rem;
  padding: 2rem 1.5rem;
  transition: transform .3s ease, box-shadow .3s ease;
  text-align: center;
}
.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.feature-card .icon-wrapper {
  width: 60px;
  height: 60px;
  background-color: #458cb7;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.5rem;
}
.feature-card h5 {
  color: #0e1839;
  margin-bottom: .75rem;
}
/* Breadcrumb personalizado */
.breadcrumb-custom {
  --bs-breadcrumb-divider: "›";
  background-color: #f0f4f8;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  margin-bottom: 2rem;
}
.breadcrumb-custom .breadcrumb-item + .breadcrumb-item::before {
  color: #458cb7;
  font-weight: bold;
}
.breadcrumb-custom a {
  color: #0e1839;
  text-decoration: none;
}
.breadcrumb-custom a:hover {
  text-decoration: underline;
}
.breadcrumb-custom .active {
  color: #458cb7;
  font-weight: 600;
}



/* Section titles con subrayado */
.section-title {
  position: relative;
  display: inline-block;
  padding-bottom: 0.5rem;
  margin-bottom: 2rem;
  font-weight: 700;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background-color: #458cb7;
}

/* Hero “Sobre Nosotros” */
#about-hero {
  background: linear-gradient(135deg, #458cb7 0%, #0e1839 100%);
}
#about-hero .lead {
  color: rgba(255,255,255,0.85);
  font-size: 1.25rem;
}

/* Feature-card con borde de acento */
.feature-card {
  background-color: #ffffff;
  border-left: 4px solid #458cb7;
  border-radius: .5rem;
  padding: 1.5rem;
  transition: transform .3s ease, box-shadow .3s ease;
}
.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}
.feature-card .icon-wrapper {
  width: 50px;
  height: 50px;
  background-color: #0e1839;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.25rem;
}

/* Breadcrumb personalizado */
.breadcrumb-custom {
  --bs-breadcrumb-divider: "›";
  background-color: #f0f4f8;
  border-radius: .5rem;
  padding: .5rem 1rem;
  margin-bottom: 2rem;
}
.breadcrumb-custom .breadcrumb-item + .breadcrumb-item::before {
  color: #458cb7;
  font-weight: bold;
}
.breadcrumb-custom a {
  color: #0e1839;
  text-decoration: none;
}
.breadcrumb-custom a:hover {
  text-decoration: underline;
}
.breadcrumb-custom .active {
  color: #458cb7;
  font-weight: 600;
}