body{
  padding: 0 !important;
}

/*.banner-background {
  background-color : /* 1) Banner con fondo sólido */
.banner-background {
    position   : relative;
    background : #3DAE2B;
    /* color sólido */
    width      : 100%;
    min-height : 650px;
    overflow   : hidden;
    margin-top : 0;
    padding-top: 0;
}

/* 2) Contenedor de imágenes 'flotantes' */
.images-wrapper {
    position      : absolute;
    top           : 0;
    left          : 0;
    width         : 100%;
    height        : 100%;
    pointer-events: none;
    /* para no interferir con clicks sobre los botones */
}

/* 3) Imagen principal, alineada a la derecha centrada verticalmente */
.feature-img {
    position : absolute;
    top      : 50%;
    right    : 0;
    transform: translateY(-50%);
    max-width: 50%;
    /* ajusta según diseño */
    width    : auto;
    z-index  : 0;
}

/* 4) Imagen secundaria, pegada al fondo y solapada */
.overlay-img {
    position : absolute;
    bottom   : 0;
    left     : 10%;
    /* desplázala hacia donde prefieras */
    transform: translateX(-10%);
    max-width: 40%;
    /* ajusta según diseño */
    width    : auto;
    z-index  : 1;
    /* por encima de .feature-img */
}
/* 1) La “imagen 2” (overlay) a ancho completo */
.images-wrapper .overlay-img {
    width    : 100%;
    /* ocupa todo el contenedor */
    max-width: none;
    /* anula la restricción previa */
    left     : 0;
    /* alinea al borde izquierdo */
    transform: none;
    /* elimina el translateX(-10%) */
}

/* 2) Desplaza un poco la “imagen 1” (feature) hacia el centro */
.images-wrapper .feature-img {
    top            : auto;
    bottom         : 0;
    transform      : none;
    right    : 10%;
}
 .images-wrapper .feature-img {
     z-index: 0;
     max-width: none;
     height: 90%;
     right: 0;
 }
/* 3) Permite que la overlay no se recorte */
.banner-background {
    overflow: visible;
}

/* (Opcional) Controla el stacking para que la overlay quede detrás del teléfono */
.images-wrapper {
    z-index: 0;
}

.images-wrapper .overlay-img {
    z-index: 1;
}
.content-overlay {
    z-index: 2;
}
.banner-img {
    position  : absolute;
    top       : 0;
    left      : 0;
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    z-index   : 0;
}

.content-overlay {
    position       : absolute;
    top            : 0;
    left           : 0;
    right          : 0;
    bottom         : 0;
    display        : flex;
    flex-direction : column;
    justify-content: center;
    padding        : 60px 80px;
    z-index        : 1;
}

.main-content-banner {
    max-width: 1200px;
    width    : 100%;
    margin   : 0 auto;
    padding-right : 30%
}

.main-title-banner {
/* font-size    : 4.5rem;*/
    font-weight  : 700;
    color        : white;
    line-height  : 1.1;
    letter-spacing: 2px;
}

.subtitle-banner {
    font-size    : 40px;
    color        : white;
    line-height  : 1;
    max-width    : 550px;
    letter-spacing: 0px;
}

.bottom-section {
    display    : flex;
    align-items: center;
    gap        : 30px;
}

.cta-section {
    flex-shrink: 0;
}

.cta-button {
  
    color           : #333;
    padding         : 12px 35px;
    border-radius   : 50px;
    text-decoration : none;
    font-size       : 1.2rem;
    font-weight     : 600;
    display         : flex;
    align-items     : center;
    gap             : 10px;
    transition      : all 0.3s ease;
    box-shadow      : 0 4px 15px rgba(139, 195, 74, 0.4);
    white-space     : nowrap;
}

.cta-button:hover {
    transform       : translateY(-2px);
    box-shadow      : 0 6px 20px rgba(139, 195, 74, 0.6);
}

.arrow-icon-banner {
    font-size  : 1.5rem;
    font-weight: bold;
}

.benefits-section-banner {
    background-color: rgba(255, 255, 255, 0.95);
    padding         : 10px 15px;
    border-radius   : 50px;
    display         : flex;
    align-items     : center;
    gap             : 15px;
    box-shadow      : 0 4px 15px rgba(0, 0, 0, 0.1);
  
    max-width       : 500px;
}

.thumbs-icon {
    width           : 40px;
    height          : 40px;
    border-radius   : 50%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    color           : white;
    font-size       : 1.2rem;
    flex-shrink     : 0;
}

.benefits-text {
    color      : #333;
    font-size  : 1rem;
    font-weight: 500;
    line-height: 1.3;
}

.benefits-text span {
    font-weight: 700;
}

.desktop-bg {
    display: block;
}


/* Responsive Design */
@media (max-width: 1470px) {
  .main-content-banner{
    padding-right : 40%
  }
}
@media (max-width: 1200px) {
    .content-overlay {
        padding: 50px 60px;
    }
  .main-content-banner{
    padding-right : 50%
  }

    .main-title-banner {
        font-size: 3.5rem;
    }

    .subtitle-banner {
        font-size: 32px;
    }
  .bottom-section {
      flex-direction: column;
      align-items: flex-start; /* ya no stretch */
      gap: 20px;
    }
    
    /* botón se adapta al contenido */
    .cta-button {
      width: auto;             /* anula cualquier width:100% */
      align-self: flex-start;  /* no estirarse */
    }

    /* benefits también se ajusta */
    .benefits-section-banner {
      flex: none;              /* elimina flex:1 */
      width: auto;             /* que mida según su contenido */
      max-width: none;         /* anula max-width:500px si la hay */
      align-self: flex-start;  /* que no se estire */
    }
}

        @media (max-width: 1100px){
          .main-content-banner{
            padding-right : 55%
          }
        }
        @media (max-width: 968px) {
          .banner-sinflot {
    height: auto;
    min-height: auto !important;
}
            .banner-background {
                min-height: 60vh;
            }

          .main-content-banner{
            padding-right : 50%
          }
            .content-overlay {
                padding        : 50px 40px;
                justify-content: flex-start;
            }

            .main-title-banner {
                font-size    : 2.5rem;
            }

            .subtitle-banner {
                font-size    : 1.4rem;
                max-width    : 100%;
            }

            .bottom-section {
              flex-direction: column;
              align-items: flex-start; /* ya no stretch */
              gap: 20px;
            }
            
            /* botón se adapta al contenido */
            .cta-button {
              width: auto;             /* anula cualquier width:100% */
              align-self: flex-start;  /* no estirarse */
            }

            /* benefits también se ajusta */
            .benefits-section-banner {
              flex: none;              /* elimina flex:1 */
              width: auto;             /* que mida según su contenido */
              max-width: none;         /* anula max-width:500px si la hay */
              align-self: flex-start;  /* que no se estire */
            }

            .benefits-text {
                font-size: 0.95rem;
            }

            .thumbs-icon {
                width    : 35px;
                height   : 35px;
                font-size: 1rem;
            }
        }

        @media (max-width: 824px) {
            .images-wrapper .feature-img {
                height: 80%;
            }
         }
        @media (max-width: 768px) {
          .images-wrapper .feature-img {
                height: 85%;
            }
          .bottom-section {
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
              gap: 20px;
              flex-wrap: wrap;
            }
            .cta-section, .benefits-section-banner {
              flex: 1;
              min-width: 45%;
            }
            .banner-background {
                min-height: 420px;
            }
          .main-content-banner{
            padding-right : 0;
          }
          .main-title-banner {
                max-width    : 68%;
            }
           .subtitle-banner {
                max-width    : 40%;
            }

            .content-overlay {
                padding    : 40px 50px;
            }

            .cta-button {
                padding  : 15px 25px;
                font-size: 1rem;
            }

            .benefits-section-banner {
                padding: 15px 20px;
            }

            .benefits-text {
                font-size: 0.9rem;
            }
        }

        @media (max-width: 600px) {
          .images-wrapper .feature-img {
                position: absolute;
                left: 50%;
                bottom: 0;
                transform: translateX(-50%);
                width: 50%; 
                max-width: 100%;
                height: auto;
            }
          
              .bottom-section {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
              }
            .banner-background {
                min-height: 600px;
            }

            .content-overlay {
                padding    : 20px 40px;
                padding-top: 30px;
            }
            .main-content-banner {
                padding-right: 0;;
            }
          .main-title-banner {
                max-width    : 100%;
            }
            .subtitle-banner {
                max-width    : 100%;
            }

            .cta-button {
                font-size: 0.95rem;
                padding  : 12px 16px;
            }

            .benefits-text {
                font-size: 0.85rem;
            }
        }

        @media (max-width: 480px) {
            .images-wrapper .feature-img {
                position: absolute;
                left: 82%;
                bottom: 0;
                transform: translateX(-50%);
                width: 55%; /* ajustalo al gusto */
                max-width: 100%;
            }
          .main-title-banner{
            font-size: 36px !important;
            line-height:1;
            letter-spacing:1px;
          }
            .banner-background {
                min-height: 450px;
            }

            .content-overlay {
                padding    : 20px;
                padding-top: 25px;
            }
          .main-content-banner {
                padding-right: 0;
            }
            .bottom-section {
              flex-direction: column;
              align-items: flex-start; /* ya no stretch */
              gap: 10px;
            }

            .cta-button {
                padding  : 7px 20px;
                font-size: 0.9rem;
            }

            .benefits-section-banner {
                padding: 12px 15px;
            }

            .thumbs-icon {
                width    : 30px;
                height   : 30px;
                font-size: 0.9rem;
            }

            .benefits-text {
                font-size: 0.8rem;
            }
        }

.container-fluid{
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.banner-sinflot .content-overlay {
    position: relative;
}