/* =========================================================
   🌄 HERO ADITECH
   Homologado con Design System Chiapas
========================================================= */

.hero-brand h1{
  text-shadow:
    0 4px 18px rgba(0,0,0,.35);
}

.hero-brand p{
  max-width: 760px;
  margin-inline: auto;
}

.hero-brand .badge{
  font-weight: 500;
  letter-spacing: .3px;
}


/* =========================================================
🌄 HERO ADITECH
Inspirado en la identidad gráfica institucional
========================================================= */

.hero-aditech{
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--chiapas-claro);
}

/* Fondo */
.hero-bg{
  position: absolute;
  inset: 0;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transform: scale(1.02);

  filter:
    grayscale(5%)
    brightness(0.92);
}

/* Overlay institucional */
.hero-overlay{
  position: absolute;
  inset: 0;

  /* background:
    linear-gradient(
      120deg,
      rgba(12, 2, 6, 0.92) 0%,
      rgba(12, 2, 6, 0.82) 28%,
      rgba(174, 25, 34, 0.18) 55%,
      rgba(255,255,255,0.12) 100%
    ); */

  /* backdrop-filter: blur(1px); */
}

/* Contenido */
.z-2{
  position: relative;
  z-index: 2;
}

/* =========================================================
🔍 BUSCADOR INSTITUCIONAL
========================================================= */

.search-box{
  margin-top: 12rem;
}

/* Caja principal */
.search-box .input-group{
  border-radius: 1.4rem;
  overflow: hidden;

  background: rgba(255,255,255,0.92);

  backdrop-filter: blur(10px);

  border: 1px solid rgba(255,255,255,0.3);

  transition: all .35s ease;
}

.search-box .input-group:hover{
  transform: translateY(-2px);

  box-shadow:
    0 1rem 2rem rgba(0,0,0,.18) !important;
}

/* Input */
.search-box .form-control{
  height: 68px;

  font-size: 1rem;

  border: 0 !important;

  background: transparent;

  color: var(--chiapas-texto);

  box-shadow: none !important;
}

.search-box .form-control::placeholder{
  color: #777;
  font-weight: 400;
}

/* Icono */
.search-box .input-group-text{
  border: 0;
  padding-left: 1.5rem;

  background: transparent;
}

.text-primario{
  color: var(--chiapas-rojo) !important;
}

/* =========================================================
🎨 BOTÓN INSTITUCIONAL
========================================================= */

.btn-chiapas{
  border: 0;

  color: var(--chiapas-blanco);

  font-weight: 600;

  padding-inline: 2rem;

  background:
    linear-gradient(
      135deg,
      var(--chiapas-rojo),
      var(--chiapas-magenta)
    );

  transition: all .3s ease;
}

/* Hover */
.btn-chiapas:hover{
  color: #fff;

  transform: scale(1.02);

  background:
    linear-gradient(
      135deg,
      var(--chiapas-magenta),
      var(--chiapas-rojo)
    );

  box-shadow:
    0 12px 24px rgba(201,1,102,.25);
}

/* =========================================================
📦 RESULTADOS DE BÚSQUEDA
========================================================= */

.search-results{
  position: absolute;

  width: 100%;

  top: 100%;
  left: 0;

  z-index: 20;

  border-radius: 1rem;

  overflow: hidden;

  border: 1px solid rgba(0,0,0,.06);

  animation: fadeSearch .25s ease;
}

.search-item{
  display: flex;
  align-items: center;
  gap: 1rem;

  padding: 1rem 1.2rem;

  text-decoration: none;

  color: var(--chiapas-texto);

  border-bottom: 1px solid #f1f1f1;

  transition: all .25s ease;
}

.search-item:last-child{
  border-bottom: 0;
}

.search-item:hover{
  /* background: rgba(201,1,102,.06); */

  transform: translateX(4px);

  color: var(--chiapas-rojo);
}

.search-item i{
  font-size: 1.1rem;
  color: var(--chiapas-magenta);
}

/* =========================================================
✨ ANIMACIONES
========================================================= */

@keyframes fadeSearch{
  from{
    opacity: 0;
    transform: translateY(-8px);
  }

  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
📱 RESPONSIVE
========================================================= */

@media (max-width: 991px){

  .hero-aditech{
    min-height: 340px;
  }

  .search-box{
    margin-top: 5rem;
  }

  .search-box .form-control{
    height: 58px;
    font-size: .95rem;
  }

  .btn-chiapas{
    padding-inline: 1.2rem;
  }

}

@media (max-width: 576px){

  .search-box .input-group{
    border-radius: 1rem;
  }

  .search-box .form-control{
    font-size: .9rem;
  }

  .btn-chiapas{
    font-size: .9rem;
  }

}

/* =========================================================
   🧭 NAVBAR
========================================================= */

.navbar {
  background: rgba(255,255,255,.95) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.05);
}

.navbar-brand {
  color: var(--chiapas-magenta) !important;
  font-weight: 700;
}

.navbar-brand:hover {
  color: var(--chiapas-rojo) !important;
}

/* =========================================================
   🔗 LINKS NAVBAR
========================================================= */

.nav-link-custom {
  position: relative;
  font-weight: 600;
  color: var(--chiapas-texto) !important;
  padding: 0.8rem 1rem !important;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.nav-link-custom:hover {
  background: rgba(201, 1, 102, 0.08);
  color: var(--chiapas-magenta) !important;
  transform: translateY(-2px);
}

.nav-link-custom.active,
.nav-link-custom.current {
  background:
    linear-gradient(
      135deg,
      var(--chiapas-magenta),
      var(--chiapas-rojo)
    );

  color: var(--chiapas-blanco) !important;

  box-shadow:
    0 8px 20px rgba(201, 1, 102, .25);
}

/* =========================================================
   🎨 BOTONES
========================================================= */

.btn-chiapas {
  background:
    linear-gradient(
      135deg,
      var(--chiapas-magenta),
      var(--chiapas-rojo)
    );

  border: none;
  color: var(--chiapas-blanco);
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-chiapas:hover {
  color: var(--chiapas-blanco);
  transform: translateY(-2px);

  box-shadow:
    0 0.75rem 1.5rem rgba(201, 1, 102, 0.28);
}

.btn-chiapas:focus {
  box-shadow:
    0 0 0 .25rem rgba(201, 1, 102, .25);
}

/* =========================================================
   🎨 UTILIDADES
========================================================= */

.bg-chiapas-magenta {
  background:
    linear-gradient(
      135deg,
      var(--chiapas-magenta),
      var(--chiapas-rojo)
    ) !important;

  color: var(--chiapas-blanco) !important;
}

.bg-chiapas-verde {
  background:
    linear-gradient(
      135deg,
      var(--chiapas-verde),
      #00b29d
    ) !important;

  color: var(--chiapas-blanco) !important;
}

.bg-chiapas-beige {
  background: var(--chiapas-beige) !important;
}

.text-primario {
  color: var(--chiapas-magenta) !important;
}

.text-secundario {
  color: var(--chiapas-verde) !important;
}

.text-rojo {
  color: var(--chiapas-rojo) !important;
}

.text-oscuro {
  color: var(--chiapas-oscuro) !important;
}

/* =========================================================
   ✨ EFECTOS GENERALES
========================================================= */

.shadow-chiapas {
  box-shadow:
    0 10px 30px rgba(12, 2, 6, .12);
}

.hover-lift {
  transition: all 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
}

/* =========================================================
   📱 RESPONSIVE
========================================================= */

@media (max-width: 991px) {

  .hero-aditech {
    min-height: 430px;
    text-align: center;
  }

  .hero-aditech h1 {
    font-size: 2.3rem;
  }

  .navbar-nav {
    padding-top: 1rem;
  }

  .nav-link-custom {
    margin-bottom: 0.4rem;
  }

  .search-box .form-control {
    height: 56px;
  }

}

@media (max-width: 576px) {

  .hero-aditech {
    min-height: 380px;
  }

  .hero-aditech h1 {
    font-size: 1.9rem;
  }

  .hero-aditech .lead {
    font-size: 1rem;
  }

}


/* =========================================================
🎉 MODAL CHIAPAS
========================================================= */

#modalChiapas .modal-content {
  background: #fff;
}

#modalChiapas img {
  max-height: 650px;
  object-fit: cover;
}

.modal-overlay {
  position: absolute;
  inset: 0;

  /* background:
    linear-gradient(
      135deg,
      rgba(12, 2, 6, .75),
      rgba(201, 1, 102, .45)
    ); */
}

.modal-caption {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 2rem;
  z-index: 2;
}

.btn-chiapas {
  background:
    linear-gradient(
      135deg,
      var(--chiapas-magenta),
      var(--chiapas-rojo)
    );

  border: none;
  color: #fff;
  font-weight: 600;

  transition: all .3s ease;
}

.btn-chiapas:hover {

  transform: translateY(-2px);

  color: #fff;

  box-shadow:
    0 10px 25px rgba(201,1,102,.25);
}

/* Responsive */

@media (max-width: 768px) {

  .modal-caption h2 {
    font-size: 1.7rem;
  }

  .modal-caption p {
    font-size: 1rem;
  }

}

/* =========================================================
🚀 SERVICIOS DESTACADOS
========================================================= */

.servicios-destacados{
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8f9fa 100%
    );
}

/* Cards */

.servicio-card{

  border-radius: 1.5rem;
  overflow: hidden;

  background: #fff;

  transition: all .35s ease;

  box-shadow:
    0 10px 30px rgba(0,0,0,.06);

  position: relative;
}

.servicio-card:hover{

  transform: translateY(-8px);

  box-shadow:
    0 20px 50px rgba(0,0,0,.12);

}

/* Icono */

.servicio-icon{

  width: 72px;
  height: 72px;

  border-radius: 1.2rem;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 2rem;

  margin-bottom: 1.5rem;
}

.servicio-icon i{
  color: #fff;
}

/* Links */

.servicio-link{

  display: flex;
  align-items: center;
  gap: .85rem;

  padding: 1rem 1.2rem;

  border-radius: 1rem;

  text-decoration: none;

  background: #f8f9fa;

  color: var(--chiapas-texto);

  font-weight: 600;

  transition: all .25s ease;
}

.servicio-link i{

  color: var(--chiapas-magenta);

  font-size: 1.2rem;
}

.servicio-link:hover{

  background:
    linear-gradient(
      135deg,
      var(--chiapas-magenta),
      var(--chiapas-rojo)
    );

  color: #fff;

  transform: translateX(6px);
}

.servicio-link:hover i{
  color: #fff;
}

/* Colores suaves */

.bg-chiapas-magenta-soft{
  background: linear-gradient(
    135deg,
    var(--chiapas-magenta),
    #df3d8d
  );
}

.bg-chiapas-verde-soft{
  background: linear-gradient(
    135deg,
    var(--chiapas-verde),
    #00bca7
  );
}

.bg-chiapas-rojo-soft{
  background: linear-gradient(
    135deg,
    var(--chiapas-rojo),
    #d92f3a
  );
}

.bg-chiapas-beige-soft{
  background: linear-gradient(
    135deg,
    #c4a991,
    var(--chiapas-beige)
  );
}

.bg-dark-soft{
  background: linear-gradient(
    135deg,
    var(--chiapas-oscuro),
    #35212b
  );
}

/* Titulos */

.text-primario{
  color: var(--chiapas-magenta);
}

/* Responsive */

@media (max-width: 768px){

  .servicio-card{
    border-radius: 1.2rem;
  }

  .servicio-link{
    font-size: .95rem;
  }

}