/* Usando !important para asegurar que sobrescriba bg-primary de Bootstrap */
.navbar-oscuro {
  background-color: #001a70 !important;
}

/* 1) Forzar el SVG blanco del ícono “hamburguesa” de Bootstrap */
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%28255,255,255,0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* 2) Quitar borde y sombra al botón cuando recibe foco (opcional) */
.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

/* ===== Estilos del footer (degradado azul) ===== */
footer {
  background: linear-gradient(135deg, #0d5ea2 0%,#001a70 100%);
  color: #ffffff;
}
footer a {
  color: #ffffff;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}



/* 1) Carrusel en index.html */
#miCarrusel {
  width: 99.23vw;        /* Ocupa todo el ancho de la ventana */
  height: auto;        /* Mantiene la altura del contenedor/carrusel */
  left: 50%;
  transform: translateX(-50%);
  display: block;
}

.carousel-inner {
  width: 100%;         /* El contenedor interno ocupa todo el ancho disponible */
  height: auto;        /* El contenedor se ajusta a la altura disponible */
}

.carousel-item {
  width: 100%;         /* Cada slide ocupa todo el ancho del contenedor */
  height: auto;        /* La altura se ajusta automáticamente */
}

.carousel-img {
  width: 100%;         /* La imagen ocupa el 100% del ancho disponible */
  height: auto;        /* La imagen ocupa el 100% de la altura del carrusel */
  object-fit: contain;   /* La imagen cubre todo el espacio disponible sin distorsionarse */
}




/* Otras imágenes también se pueden modificar de manera similar */
.conocenos-img-peque,
.conocenos-img-grande,
.servicio-img,
.marco-img {
  width: 100%;  /* Asegura que las imágenes no se recorten en el ancho */
  height: auto;  /* Permite que las imágenes se ajusten sin perder proporción */
  object-fit: cover;  /* Cubrirá el área pero manteniendo la relación de aspecto */
}
.servicio-img
 {
  width: 80%;  /* Asegura que las imágenes no se recorten en el ancho */
  height: auto;  /* Permite que las imágenes se ajusten sin perder proporción */
  object-fit: cover;  /* Cubrirá el área pero manteniendo la relación de aspecto */
}
/* ============================
   Ajustes responsivos para pantallas pequeñas
   ============================ */

@media (min-width: 375px) and (max-width: 575px) {
  #miCarrusel {
  width: 100vw;        
}
  .carousel-img {
    height: auto;
    width: auto;
    object-fit: contain; /* Para que las imágenes se adapten sin deformarse */
  }
  .conocenos-img-peque {
    height: 180px;
  }
  .conocenos-img-grande {
    height: 250px;
  }
  .servicio-img {
    height: 350px;
  }
  .marco-img {
    height: 250px;
  }
}




/* 1) Para móviles (≤576px) */
@media (max-width: 576px) {
  #miCarrusel {
  width: 100vw;        
}
  .carousel-img {
    height: auto;
    width: 100%;
    object-fit: contain; 
  }
  .conocenos-img-peque {
    height: 180px;
  }
  .conocenos-img-grande {
    height: 250px;
  }
  .servicio-img {
    height: 350px;
  }
  .marco-img {
    height: 250px;
  }
}

/* 2) Para tablets pequeñas (577px – 768px) */
@media (min-width: 577px) and (max-width: 768px) {
  #miCarrusel {
  width: 100vw;        
}
  .carousel-img {
    height: auto;
    width: 100%;
    object-fit: contain;
  }
  .conocenos-img-peque {
    height: 200px;
  }
  .conocenos-img-grande {
    height: 300px;
  }
  .servicio-img {
    height: 450px;
  }
  .marco-img {
    height: 300px;
  }
}

/* 3) Para pantallas medianas (769px – 991px) */
@media (min-width: 769px) and (max-width: 991px) {
  #miCarrusel {
  width: 100vw;        
}
  .carousel-img {
    height: auto;
    width: 100%;
    object-fit: contain; 
  }
  .conocenos-img-peque {
    height: 220px;
  }
  .conocenos-img-grande {
    height: 350px;
  }
  .servicio-img {
    height: 500px;
  }
  .marco-img {
    height: 330px;
  }
}


/* 4) Para computadoras portátiles con pantallas grandes (992px a 1200px) */
@media (min-width: 992px) and (max-width: 1200px) {
 
  /* Ajuste adicional para pantallas medianas de computadoras y laptops */
 #miCarrusel {
  width: 100vw;        
}
  .carousel-img {
    height: auto;  /* Ajustamos el tamaño del carrusel */
    object-fit: contain
  }
  .conocenos-img-peque {
    height: 280px; /* Imágenes pequeñas ajustadas */
  }
  .conocenos-img-grande {
    height: 380px; /* Imágenes grandes ajustadas */
  }
  .servicio-img {
    height: 550px; /* Ajustamos imágenes de servicio */
  }
  .marco-img {
    height: 350px; /* Ajustamos imágenes de marco legal */
  }
}

@media (min-width: 1201px) and (max-width: 1440px) {
 
  /* Ajuste adicional para pantallas medianas de computadoras y laptops */
 #miCarrusel {
  width: 100vw;        
}
  .carousel-img {
    height: auto;  /* Ajustamos el tamaño del carrusel */
    object-fit: contain
  }
  .conocenos-img-peque {
    height: 280px; /* Imágenes pequeñas ajustadas */
  }
  .conocenos-img-grande {
    height: 380px; /* Imágenes grandes ajustadas */
  }
  .servicio-img {
    height: 550px; /* Ajustamos imágenes de servicio */
  }
  .marco-img {
    height: 350px; /* Ajustamos imágenes de marco legal */
  }
}