.frame4-section {
   position: relative;
   width: 100%;
   background: #fff;
   overflow: hidden;
   margin: 0 auto 57px auto;
   z-index: 1;
   display: flex;
   justify-content: center;
 }

 .frame4-section-content {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   max-width: 1200px;
   margin: 0 auto;
   gap: 40px;
   padding: 60px 40px;
   position: relative;
   z-index: 2;
 }

 .frame4-left {
   flex: 1;
   max-width: 600px;
 }

 .frame4-section-text h2 {
   font-size: 40px;
   line-height: 1.1;
   letter-spacing: -1px;
   margin-bottom: 24px;
   color: #0D0030;
 }

 .highlight-pink {
   color: #FE2491;
   font-weight: 900;
 }

 .highlight-orange {
   color: #ffa600;
   font-weight: 900;
 }

 .carousel-container-ns {
   background: white;
  
   overflow: hidden;
   padding: 0px;
   position: relative;
   height: 400px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }

 .slide-ns4 {
   display: none;
   overflow-y: auto;
   max-height: 350px;
 }

 .slide-ns4.active {
   display: block;
 }

 .slide-ns4 p {
   font-family: Arial, sans-serif;
   line-height: 1.6;
   font-size: 16px;
   margin-top: 30px;
   text-align: justify;
 }

 .frame4-section-image {
   flex: 1;
   text-align: center;
 }

 .frame4-section-image img {
   max-width: 100%;
   height: auto;
 }

 .dots-container {
   display: flex;
   justify-content: center;
   margin-top: 20px;
   flex-wrap: wrap;
 }

 .dots-container .dot {
   height: 12px;
   width: 12px;
   margin: 5px;
   background-color: #ccc;
   border-radius: 50%;
   display: inline-block;
   cursor: pointer;
   transition: background-color 0.3s ease;
 }

 .dots-container .dot.active {
   background-color: #333;
 }

 /* ============================= */
 /* 👶 Móviles muy pequeños (≤ 480px) - Portrait */
 /* ============================= */
 @media ((max-width: 480px) and (orientation: portrait)) or (max-width: 480px) {
   .frame4-section-content {
     flex-direction: column;
     padding: 40px 20px;
     gap: 20px;
   }

   .frame4-section-text h2 {
     font-size: 28px;
     text-align: center;
   }

   .carousel-container-ns {
     height: auto;
     
   }

   .slide-ns4 p {

    font-size: 0.9rem;
   }


 }

 /* ============================= */
 /* 📱 Móviles hasta 768px */
 /* ============================= */
 @media (min-width: 481px) and (max-width: 768px) {
   .frame4-section-content {
     flex-direction: column;
     padding: 50px 30px;
     gap: 30px;
   }

   .frame4-section-text h2 {
     font-size: 32px;
     text-align: center;
   }

   .carousel-container-ns {
     height: auto;
     
   }

   .frame4-section-image {
     margin-top: 20px;
   }
 }

 /* ============================= */
 /* 📱 Tabletas grandes (≤ 912px) */
 /* ============================= */
 @media (min-width: 769px) and (max-width: 912px) {
   .frame4-section-content {
     padding: 50px 30px;
   }

   .frame4-section-text h2 {
     font-size: 36px;
   }

   .carousel-container-ns {
     height: auto;
   }
 }

 /* ============================= */
 /* 💻 Laptops estándar (≤ 1024px) */
 /* ============================= */
 @media (min-width: 913px) and (max-width: 1024px) {
   .frame4-section-content {
     padding: 60px 30px;
     flex-direction: column;
     align-items: center;
   }

   .frame4-section-text h2 {
     font-size: 36px;
     text-align: center;
   }

   .frame4-section-image {
     margin-top: 30px;
   }
 }

 /* ============================= */
 /* 🖼 Landscape en tablets/laptops ≤ 1024px */
 /* ============================= */
 @media (min-width: 913px) and (max-width: 1024px) and (orientation: landscape) {
   .frame4-section-content {
     flex-direction: row;
     align-items: flex-start;
     padding: 40px;
     gap: 30px;
   }

   .carousel-container-ns {
     height:auto;
   }
 }

 /* ============================= */
 /* 📱 Portrait ≤ 1024px */
 /* ============================= */
 @media (min-width: 913px) and (max-width: 1024px) and (orientation: portrait) {
   .frame4-section-content {
     flex-direction: column;
     padding: 40px 20px;
   }

   .frame4-section-text h2 {
     font-size: 30px;
   }

   .carousel-container-ns {
     height: auto;
   }
 }

 /* ============================= */
 /* 🖥 Pantallas grandes (≥ 1440px) */
 /* ============================= */
 @media (min-width: 1440px) {
   .frame4-section-content {
     padding: 80px 60px;
     max-width: 1400px;
   }

   .frame4-section-text h2 {
     font-size: 48px;
   }

   .carousel-container-ns {
     height: auto;
    
   }

   .slide-ns4 p {
     font-size: 1.1rem;
   }
 }