/* Imagen izquierda cuadrada */
.inf-main-img-wrapper {
    width: 100%;
    max-width: 80%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.inf-main-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Ventana del carrusel */
.inf-carousel-window {
    width: 100%;
    overflow: hidden;
    position: relative;
      padding-left: 0;
    padding-right: 0;
}

/* Track horizontal */
.inf-carousel-track {
    display: flex;
    transition: transform 0.4s ease;
}

/* Ítems */
.inf-item {
    flex: 0 0 40%; /* 2.5 items = 40% approx */
    margin-right: 20px;
    border-radius: 18px;
    padding: 25px;
    min-height: 350px;
    /* filter: blur(3px); */
    transition: filter .3s, transform .3s;
    display: flex;
        align-items: flex-end;
}

/* Ítem activo */
/* .inf-item.active {
    filter: blur(0);
    transform: scale(1.02);
} */

/* Botón de descarga oculto en no-activos */
.inf-item .inf-download-btn {
    margin-top: 15px;
    display: inline-block;
    width: 100%;
    font-weight: bold;
}

.inf-item:not(.active) .inf-download-btn {
    display: none;
}
.inf-item-content>.h2 {
    line-height: 1.2;
}


.col-car::after {
    content: "";
    position: absolute;
    top: 0;
    width: 200px;
    height: 100%;
    z-index: 10;
    pointer-events: none;
    right: 0;
    background: linear-gradient(to left, white 0%, transparent 100%);
}

.content h2{
    color: #2C5904;
}
.content h2 strong{
    color: #72B344;
}

/* ---------- RESPONSIVE ---------- */
@media(max-width: 600px) {
   .pro_prod .content p { font-size: 15px; }
    .pro_prod .content h2{ font-size: 24px;}
    .inf-item {
        flex: 0 0 60%;
    }
    
.inf-main-img-wrapper {
    max-width: 100%;
}
.inf-item{
    min-height: 300px;
}
.inf-item-content .h2 {
    font-size: 1.5rem;
    line-height: 1;
}
.rounded-8px {
    border-radius: 0px !important;
}

}







/* ===== SLIDER INF SOST ===== */
.slider-inf-sost{
  background:#fff;
  overflow:hidden;
}

.slider-inf-wrapper{
  position:relative;
  /* JS le pondrá una altura real con inline style */
}

/* CONTENEDOR DE SLIDES */
.slider-inf-slides{
  position:relative;
  width:100%;
  height:100%;
}

/* SLIDE */
.slider-inf-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform:translateY(22px);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events:none;
}

.slider-inf-slide.is-active{
    position:relative;
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
  z-index:2;
}

/* Asegurar que el layout interno use toda la altura del slide */
.slider-inf-slide .row{
  height:100%;
}

.slide-text{
  background:#2C5904;
  color:#fff;
  padding:4rem;
}

.slide-text-inner{
  max-width:520px;
}

/* IMAGEN: aquí estaba el problema principal */
.slide-image{
  position:relative;
  overflow:hidden;
  min-height: 280px; /* ✅ evita colapso cuando el contenedor no tiene altura */
}

.slide-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ===== INDICADOR ===== */
.slider-indicator{
  position:absolute;
  left:0;
  top:0;
  width:18px;
  height:100%;
  z-index:5;
}

.slider-indicator-active{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:0;
  background:#72B344;
  transition:height .45s ease;
}

/* ===== CONTROLES ===== */
.slider-controls{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:6;
}

.slider-btn{
  width:44px;
  height:44px;
  border-radius:50%;
  background:#fff;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#2C5904;
  font-size:1.4rem;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
}

.slider-btn:disabled{
  display:none;
}

/* ===== MOBILE ===== */
@media (max-width: 767px){

  /* Slider sigue siendo slider (no apilar) */

  /* .slide-text{
    padding:2rem 1.5rem;
  } */
.slide-text, .slide-image {
    height: 420px;
}
  /* Texto arriba, imagen abajo */
  .slider-inf-slide .row{
    flex-direction:column;
  }

  /* Imagen visible siempre */
  .slide-image{
    min-height:240px;
  }

  /* Flechas horizontales */
  .slider-controls{
    flex-direction:row;
    gap:16px;
  }

  /* Rotar iconos para que se sientan left/right */
  .slider-btn-up i,
  .slider-btn-down i{
    transform: rotate(-90deg);
    display:inline-block;
  }

  .slider-indicator{
    width:14px;
        height: 50%;
  }
}