/* Conocenos Page Styles */

/* Base styles using the same structure as about.css */
.conocenos__banner {
  display   : flex;
  background: url(../assets/images/banner-usage-page-background-desktop.webp) no-repeat center center/cover;
  height    : 360px;
  position  : relative;
}

/* Main content structure */
.page__main__content {
  padding   : 30px 24px;
  text-align: center;
  max-width : 1200px;
  margin    : 0 auto;
}

.page__main__description {
  font-size  : 17px;
  line-height: 23px;
  color      : #4f4f4f;
  margin     : 0;
  text-align : justify;
  max-width  : 800px;
  margin     : 0 auto;
}

/* Desktop Layout */
.conocenos__content {
  display       : flex;
  flex-direction: column;
  gap           : 40px;
  padding       : 0 16px;
  max-width     : 1400px;
  margin        : 0 auto;
}


.features-column {
  display       : flex;
  flex-direction: column;
  gap           : 24px;

  justify-content: center;

}

.feature {
  display         : flex;
  align-items     : center;
  gap             : 18px;
  background-color: #1C1A50;
  padding         : 12px 16px;
  border-radius   : 32px;
  font-weight     : 500;
  text-align      : left;
  font-size       : 16px;
  line-height     : 1.4;
  box-shadow      : none;
  transition      : none;
  min-height      : 95px;
}



.feature-number {
  color : white;
  width : 32px;
  height: 32px;

  display        : flex;
  align-items    : center;
  justify-content: center;
  font-weight    : semi-bold;
  font-size      : 48px;
  flex-shrink    : 0;
}

.feature-text {
  flex       : 1;
  color      : white;
  font-weight: 400;
  font-size  : 21px;
}

/* Phone Image Section */
.phone-container {
  display        : flex;
  justify-content: center;
  align-items    : center;
  flex           : 1;

}

.phone-container img {
  max-height   : 600px;
  width        : auto;
  object-fit   : contain;
  border-radius: 20px;
}

/* CTA Banner */
.cta-banner {
  background: linear-gradient(-80.09deg, #deb3ff 5.87%, #3e5bff 50.18%);
  padding   : 40px 20px;
  text-align: center;
  margin-top: 40px;
}

.cta-title {
  font-size     : 32px;
  font-weight   : 800;
  line-height   : 44px;
  color         : #fffefe;
  letter-spacing: -1px;
  margin        : 0;
  max-width     : 750px;
  margin        : 0 auto;
}

/* Benefits Section */
.benefits-section {
  padding              : 40px 15px;
  display              : grid;
  grid-template-columns: 1fr;
  gap                  : 26px;
  max-width            : 1200px;
  margin               : 0 auto;
}

.benefit-card {
  max-width: auto;
  margin   : 0 auto;
  width    : 100%;
}

.benefit-image {
  width        : auto;
  height       : 330px;
  border-radius: 30px;
  overflow     : hidden;
  margin-bottom: 16px;
}

.benefit-image img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
}

.benefit-content {
  padding: 0 8px;
}

.benefit-title {
  font-size     : 32px;
  font-weight   : 400;
  line-height   : 38px;
  color         : #000000;
  margin        : 0 0 12px 0;
  letter-spacing: -1px;
}

.benefit-description {
  font-size  : 17px;
  line-height: 23px;
  color      : #4f4f4f;
  margin     : 0;
  text-align : left;
}


@media (width < 768px) {


  .conocenos__content {
    gap      : 0;
    max-width: 1200px;
    margin   : 0 auto;
    padding  : 0;
  }

  .page__main__description {
    font-size  : 18px;
    line-height: 26px;
  }


  .features-column {
    width    : 100%;
    max-width: 500px;
    padding  : 0 21px;
  }

  .features-container {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : 24px;
  }

  .phone-container {
    max-width: 600px;
    height   : auto;
    padding  : 0 21px;
    flex     : none;
    order    : -1;
  }

  .feature-text {

    font-weight: 300;
    line-height: 24px;
  }

  .feature {
    gap: 32px;
  }


  .benefits-section {
    gap    : 40px;
    padding: 20px;
  }

  .benefit-image {
    max-height: 250px;

  }

  .benefit-title {
    text-align: center;
  }
}

@media (width >=768px) and (width < 1024px) {

  /* Responsive styles entre 768px y 1024px */
  .conocenos__banner {
    height: 420px;
  }

  .page__banner__title {
    line-height: normal;
  }

  .conocenos__content {
    padding  : 0 21px;
    gap      : 10px;
    max-width: 1300px;
  }

  .features-container {
    display              : grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap                  : 16px;
    justify-content      : center;

  }

  .features-column {
    max-width: 250px;
    gap      : 20px;

  }

  .feature {
    padding: 12px 12px;
    gap    : 0;
  }

  .feature-number {
    width      : 40px;
    height     : 40px;
    font-size  : 24px;
    line-height: 32px;
  }

  .phone-container {
    width: 300px;

    flex : none;
    order: 0;
  }

  .feature-text {
    font-size: 16px;

  }

  .benefits-section {
    grid-template-columns: repeat(2, 1fr);
    gap                  : 32px;
    padding              : 60px 32px;
  }
}

@media (width < 1024px) {
  .conocenos__banner {
    background: url(../assets/images/banner-usage-page-background-mobile.webp) no-repeat center center / cover;
  }

}

@media (width >=1024px) {
  .conocenos__banner {
    background: url(../assets/images/banner-usage-page-background-desktop.webp) no-repeat center center/cover;
    height    : 500px;
  }



  /* Two-column layout for desktop */
  .conocenos__content {
    display       : flex;
    flex-direction: column;
    padding       : 24px 24px;
    max-width     : 1400px;
    margin        : 0 auto;
    align-items   : flex-start;
  }

  .conocenos__left-column {
    flex     : 1;
    max-width: 600px;
  }

  .conocenos__right-column {
    flex    : 0 0 400px;
    position: sticky;
    top     : 120px;
  }

  .page__main__content {
    padding: 0;
  }

  .page__main__description {
    font-size  : 18px;
    line-height: 26px;
    max-width  : 100%;
  }

  .features-container {
    display              : grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    margin               : 0 auto;
    gap                  : 24px;


  }

  .features-column {

    display       : flex;
    flex-direction: column;
    gap           : 24px;
    max-width     : 300px;

  }

  .phone-container {
    flex           : 0 0 350px;
    height         : 500px;
    display        : flex;
    align-items    : center;
    justify-content: center;
  }

  .phone-container img {
    width     : 100%;
    height    : 100%;
    object-fit: contain;
  }

  .cta-title {
    font-size  : 48px;
    line-height: 56px;
  }

  .benefits-section {
    grid-template-columns: repeat(3, 1fr);
    gap                  : 40px;
    padding              : 80px 40px;
  }

  .benefit-card {
    max-width: none;
  }
}