/* Responsive Adjustments */
@media (max-width: 480px) {
  .footer-instagram{display:none}
    .separa-valores{margin-top:150px} 
  }

@media (max-width: 720px) {
    .separa-valores{margin-top:30px} 
  }

@media (max-width: 1024px) {
  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .stats-grid {
    gap: 50px;
  }

}

@media (max-width: 768px) {
  .container {
    padding: 0 10px;
  }

  header .container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .header-left {
    display: none;
  }

  .hero {
    height: 600px;
    display: flex;
    flex-direction: column;
  }
  
  .hero-content {
    position: relative;
    bottom: 0;
    right: 0;
    max-width: 100%;
    border-radius: 0;
    padding: 30px 20px;
  }
  
  .hero-content h1 {
    font-size: 36px;
  }
  
  .stats-grid {
    flex-direction: column;
    gap: 20px;
  }
  
  .msjs { grid-template-columns: 1fr; }
  .msj-overlay {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
  }

  .msj-overlay .play-btn {
    display: none; /* opcional: ocultás el ícono de play si no abre video */
  }

  .msj-overlay .ver-mas {
    margin-left: 0;
  } 
    
    
  
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .stat-item h3 {
    font-size: 48px;
  }
}

@media (max-width: 480px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }
  
  .hero {
    height: auto;
  }
  
  .hero-img {
    height: 300px;
  }
    
    .h2{
  font-size: 20px;
    }
  
  .stats {
  height: 700px;
}

  .stat-item h3 {
    font-size: 40px;
  } 
    
    .vacio{display:none}
  
  .slider-dots {
  bottom: 10px;
  gap: 8px;
}

  .dot {
  width: 6px;
  height: 6px;
}

.slider-arrow {
  width: 20px;
  height: 20px;
}

.stats h2 {
  font-size: 30px;
  margin-bottom: 30px;
  font-weight: 600;
}
.stat-item h3 {
  font-size: 40px;
}

.stat-item p {
  font-size: 14px;
  line-height:15px;
}

.stats-grid.cols-2, .stats-grid.cols-3, .stats-grid.cols-4 {
  grid-template-columns: repeat(1, 1fr);
}
    
.page-title-extra-small h1 {
  font-size: 17px;
  font-weight: 700;
  line-height: 20px;
  margin: 30px;
  
}

.page-title-extra-small h2 {
  font-size: 2.4rem;
  color:red;
  font-weight: 700;
  line-height: 30px;
  margin: 20px;
}

 h5 {
  font-size: 1.80rem;
  line-height: 2.5rem;
}
    
    section.big-section {
  padding-top: 0px;
  height: 1000px;
}
    div#evolucion.swiper-wrapper .swiper-slide {
  height: 100%;
}
    div#historia.swiper-container .slide-historia-long {height:850px}
  .swiper-slide.slide-historia-long p {padding-bottom:300px}
    
  div.col-12.col-lg-5.col-md-6.offset-lg-1 {margin-top:30px}    
    
}

@media (min-width: 1199px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1170px;
  }


/* DUCSA overrides responsive */
@media (max-width: 991px) {
  .hero { height: 420px; }
  .hero-content { max-width: 420px; padding: 30px 35px; }
  .hero-content h1 { font-size: 44px; }
  .stats { height: 360px; }
  .video-card { height: 360px; }
 .video-card-vertical{ height: 600px; }
}
@media (max-width: 768px) {
  .hero { height: auto; }
  .hero-img { height: 280px; object-fit: cover; }
  .hero-content {
    position: relative;
    max-width: 100%;
    border-top-left-radius: 0;
    padding: 25px 20px;
  }
    
  .stats { height: 320px; }
  .msjs {grid-template-columns: 1fr;}
  .msj-card { height: 400px;}
}
  .videos { flex-direction: column; }
  .video-card { height: 300px; }
 ..video-card-vertical{ height: 600px; }
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .project-card { height: 240px; }
}
@media (max-width: 480px) {
  .projects-grid { grid-template-columns: 1fr; }
  .stat-item h3 { font-size: 40px; }
  .stats {height: 700px;}
  .stats-grid { gap: 60px; }
}
    
@media (min-width: 1199px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1170px;
  }
    }