/* ==== ESTILOS GENERALES ==== */
 .body-frame1-cursoonline {
   position: relative;
   box-sizing: border-box;
   margin: 0;
   padding: 0 20px;
   font-family: 'Segoe UI', sans-serif;
   background-color: #fff;
   color: #333;
   line-height: 1.6;
   z-index: 3;
    height: auto;
   overflow: visible;  
 }

 /* ==== CONTENEDOR PRINCIPAL ==== */
 .container-fr1-cursoonline {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   max-width: 1200px;
   margin: auto;
   gap: 20px;
   z-index: 3;
 }

 /* ==== SECCIÓN DE TEXTO ==== */
 /* ==== SECCIÓN DE TEXTO ==== */
 /* ==== CONTENEDOR TEXTO ==== */
 .text-content-fr1-cursoonline {
   flex: 1 1 500px;
   padding-left: 48px;
   padding-top: 40px;
 }

 .h1-curso-online {
   font-size: 4.2rem;
   margin: 0 0 -30px 70;
   /* Más pegado al logo aún */
   text-align: left;
 }

 .logo-cursoonline {
   display: block;
   margin: -6px 0 -4px 0;
   /* Prácticamente se une al h2 */
   max-width: 100%;
   height: auto;
 }

 .h2-curso-online {
   font-size: 2.0rem;
   margin: -10px 0 0 60;
   /* Pegado al logo inferior */
   text-align: left;
 }


 .orangespa-cursoonline {
   color: #FFA726;
   font-weight: bold;
 }




 /* Subtítulo y lista */

 .div-texto-fr1-cursoonline {
   margin-top: auto;
   margin-left: 50px;
   width: 500px;
 }

 .subtitle-curso-online {
   margin-top: 10px;
   font-size: 1.1rem;
 }

 .div-texto-fr1-cursoonline ul {
   margin-top: 15px;
   padding-left: 20px;
 }

 .div-texto-fr1-cursoonline li {
   margin-bottom: 0px;
 }

 /* ==== SECCIÓN DE IMAGEN ==== */
 .image-content {
   position: relative;
   flex: 2 1 350px;
   text-align: center;
   margin-right: 30px;
   padding: 0 1rem;
   z-index: 1;
   margin-bottom: -50px;
   margin-top: 150px;
 }

 .image-content img {
   max-width: 100%;
   height: auto;
   border-radius: 10px;
   display: block;
   border-radius: 10px;
   background: transparent;
   margin: -45px auto;
 }







 /* =============================
   MEDIA QUERIES RESPONSIVAS
============================= */

 /* 480px - Phones Portrait */
 @media (max-width: 480px) and (orientation: portrait) {
   .container-fr1-cursoonline {
     flex-direction: column;
     padding: 0 10px;

   }

   .text-content-fr1-cursoonline {
     padding-left: 10px;
     padding-top: 20px;
     text-align: center;
     flex: 1 1 400px;
   }

   .h1-curso-online {
     font-size: 2rem;
     margin-left: 0;
     margin: 0 0 -14px 0;
     /* Más pegado al logo aún */
     white-space: nowrap;
   }

   .h2-curso-online {
     font-size: 1.2rem;
     margin-left: 0;
   }

   .div-texto-fr1-cursoonline {
     width: 100%;
     margin-left: 0;
   }

   .image-content {
     margin-right: 0;
     margin-top: 20px;
   }
 }

 /* 768px - Tablets */
 @media (min-width: 481px) and (max-width: 768px) {
   .container-fr1-cursoonline {
     flex-direction: column;
     gap: 30px;
     padding: 0 20px;
   }

   .text-content-fr1-cursoonline {
     padding-left: 20px;
     padding-top: 20px;
     text-align: center;
   }

   .h1-curso-online {
     font-size: 2.8rem;
     margin-left: 0;
   }

   .h2-curso-online {
     font-size: 1.5rem;
     margin-left: 0;
   }

   .div-texto-fr1-cursoonline {
     width: 100%;
     margin-left: 0;
   }

   .image-content {
     margin-right: 0;
   }
 }

 /* 912px - Tablets grandes / landscape */
 @media (min-width: 769px) and (max-width: 912px) {
   .text-content-fr1-cursoonline {
     padding-left: 30px;
   }

   .h1-curso-online {
     font-size: 3rem;
   }

   .h2-curso-online {
     font-size: 1.7rem;
   }
 }

 /* 1024px - Laptops/Tablets */
 @media (min-width: 913px) and (max-width: 1024px) {
   .h1-curso-online {
     font-size: 3.2rem;
     margin-left: 40px;
   }

   .h2-curso-online {
     font-size: 1.8rem;
     margin-left: 40px;
   }

   .div-texto-fr1-cursoonline {
     margin-left: 40px;
     width: 100%;
   }
 }

 /* 1024px - Tablets Landscape */
 @media (min-width: 913px) and (max-width: 1024px) and (orientation: landscape) {
   .container-fr1-cursoonline {
     flex-direction: row;
     gap: 20px;
   }

   .text-content-fr1-cursoonline {
     padding-left: 30px;
   }
 }

 /* 1024px - Tablets Portrait */
 @media (min-width: 913px) and (max-width: 1024px) and (orientation: portrait) {
   .container-fr1-cursoonline {
     flex-direction: column;
   }

   .text-content-fr1-cursoonline {
     text-align: center;
     padding-left: 0;
   }

   .div-texto-fr1-cursoonline {
     margin-left: 0;
     width: 100%;
   }

   .h1-curso-online,
   .h2-curso-online {
     margin-left: 0;
   }
 }

 /* Pantallas grandes - Desktops */
 @media (min-width: 1440px) {
   .h1-curso-online {
     font-size: 4.5rem;
   }

   .h2-curso-online {
     font-size: 2.2rem;
   }

   .div-texto-fr1-cursoonline {
     width: 550px;
   }
 }