body_carousel {
  margin: 0;
  background: lightgray;
  text-align: center;
  font-family: sans-serif;
  color: #fefefe;
}
.container_carousel {
  position: relative;
  width: 350px;
  height: 430px;
  margin: 100px auto 0 auto;
  perspective: 1400px;
  margin-top: -170px;
}

.carousel {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d; 
  animation: rotate360 60s infinite forwards linear;
}

.carousel figure{
    position: absolute;
  width: 207px;
  height: 151px;
  top: 210px;
  left: 10px;
  right: 10px;
  background-size: cover;
  box-shadow:inset 0 0 0 2000px rgba(0,0,0,0.5);
  display: flex;
    
}

.card-body .row .avatar{
  width: 55%;
  height: auto;
  border-radius: 50%;
  display: inline-block;
}
.cardbanner {
min-height: 450px !important;
height: auto !important;
}

.owl-item img {
  width: auto !important;
  max-width: 100% !important; /* no crecerá más que su tamaño natural o el contenedor */
  height: auto !important;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

.container .owl-carousel {
min-height: 450px; /* altura mínima, pero puede crecer según la imagen */
}
      .modal-content {
          /* flex-direction: row !important; */
          align-items: center;
          justify-content: center;

      }

      .banner-titulo {
/*text-transform: uppercase; /* Títulos en mayúsculas */
font-size: 2rem;           /* Tamaño grande */
font-weight: 800;           /* Muy negrita */
color: #000;
margin: 0 0 32px 0 !important;
}

.banner-descripcion {
font-size: 1.2rem;         /* Un poco más grande */
color: #989CA7;
margin: 0px 0px 14px !important;
}

.banner-card {
background: #fff !important;
border: none;
box-shadow: 0 4px 8px rgba(0,0,0,0.08);
border-radius: 15px;
height: auto;   /* altura automática según la imagen */
}

.item .card-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.banner-card .col-lg-5 {
display: flex;
flex-direction: column;
justify-content: flex-start; /* texto siempre desde arriba */
}

.banner-img {
width: 100%;
height: auto;       /* la imagen crece según su tamaño */
object-fit: contain; /* no recorta la imagen */
}

.banner-btn {
  color: rgb(44, 41, 41);
}

@media (max-width: 769px) {

.owl-carousel .owl-item {
padding: 0 !important;
}

.owl-carousel .item {
width: 100% !important;
}

.cardbanner,
.banner-card {
width: 100% !important;
border-radius: 12px;
}
}
/*.carousel__face { 
  position: absolute;
  width: 100%;
  height: 207px;
  top: 210px;
  left: 10px;
  right: 10px;
  background-size: cover;
  box-shadow:inset 0 0 0 2000px rgba(0,0,0,0.5);
  display: flex;
}*/

/* span {
  margin: auto;
  font-size: 2rem;
} */


/*.carousel__face:nth-child(1) {

  content: url("../img/informe/modal_seguridad.jpeg");
  transform: rotateY(  0deg) translateZ(430px); }
.carousel__face:nth-child(2) { 
  content: url("../img/informe/modal_desarrollo.jpeg");
    transform: rotateY( 60deg) translateZ(410px); }
.carousel__face:nth-child(3) {
  content: url("../img/informe/modal_salud.jpeg");
  transform: rotateY( 120deg) translateZ(410px); }
.carousel__face:nth-child(4) {
  content: url("../img/informe/modal_obras_educativas.jpeg");
  transform: rotateY(180deg) translateZ(410px); }
.carousel__face:nth-child(5) { 
  content: url("../img/informe/modal_obras.jpeg");
 transform: rotateY(240deg) translateZ(410px); }
 .carousel__face:nth-child(6) { 
  content: url("../img/informe/modal_campo.jpeg");
 transform: rotateY(300deg) translateZ(410px); }*/

.carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(430px);}
.carousel figure:nth-child(2){transform: rotateY(70deg) translateZ(430px);}
.carousel figure:nth-child(3){transform: rotateY(140deg) translateZ(430px);}
.carousel figure:nth-child(4){transform: rotateY(210deg) translateZ(430px);}
.carousel figure:nth-child(5){transform: rotateY(280deg) translateZ(430px);}






@keyframes rotate360 {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-360deg);
  }
}

.carousel img{
    width: 100%;
  height: 100%;
}
.centerlogo {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
