.project-detail {
      padding: 0rem 1.5rem;
    }

.project-image {
  margin-top: 20px; /* separación arriba */
  margin-bottom: 40px; /* separación arriba */
  height: auto;
}

.project-img {
  display: block;
  margin: 0 auto;        /* centra horizontal si sobra espacio */
  margin-top: 20px;      /* margen superior extra */
  margin-bottom: 10px;   /* margen inferior */
  max-width: 100%;       /* no desborda */
  height: auto;          /* mantiene proporción */
  border: 2px solid #ddd;
  border-radius: 0.5rem;
  object-fit: cover;     /* evita que se deforme si das altura fija */
}



    .project-content {
      padding: 2rem;
    }

    .project-title-detail {
      font-size: 2rem;
      color: #0368aa;
      font-weight: 600;
    }

    .project-entity {
      margin-top: 1rem;
      font-size: 1.3rem;
    }

    .project-entity img {
      height: 28px;
      margin-right: 0.5rem;
      vertical-align: middle;
    }

    .project-summary {
      font-size: 0.95rem;
      margin-top: 1.2rem;
    }

    .project-section-title {
      color: #0368aa;
      font-weight: 600;
      margin-top: 1.8rem;
      margin-bottom: 0.5rem;
    }

    .stakeholders img {
      height: 30px;
      margin-right: 1rem;
    }
 /* ===== Indicadores del carrusel (bolitas) ===== */
.carousel-indicators {
  position: absolute;
  bottom: -25px; /* separa las bolitas de la imagen */
  justify-content: center;
  margin: 0;
}

.carousel-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #0368AA; /* color base */
  opacity: 0.5; /* menos transparencia */
  border: 1px solid white; /* contorno blanco para resaltar */
  margin: 0 6px; /* espacio entre bolitas */
  transition: all 0.3s ease;
}

.carousel-indicators [data-bs-target]:hover {
  opacity: 1;
  transform: scale(1.2);
  background-color: #024f7d; /* tono más oscuro al pasar el mouse */
}

.carousel-indicators .active {
  background-color: #024f7d; /* bolita activa */
  opacity: 1;
  transform: scale(1.3);
}