html {
  scroll-behavior: smooth;
}

/* Intro "Nuestros Servicios" – BEM */
.services-detail-page {
  width: 100%;
  display: flex;
  min-height: 100vh;
  align-items: center;
  flex-direction: column;
}

.services-detail-intro {
  display: contents;
}

.services-detail-intro__section {
  gap: var(--dl-layout-space-threeunits);
  display: flex;
  overflow: hidden;
  position: relative;
  padding-top: 0;
  padding-bottom: var(--dl-layout-space-unit);
  flex-direction: column;
  margin-bottom: 30px;
}

.services-detail-intro__inner {
  width: 100%;
  display: flex;
  max-width: var(--dl-layout-size-maxwidth);
  align-items: center;
  flex-direction: column;
}

.services-detail-intro__content {
  gap: var(--dl-layout-space-oneandhalfunits);
  display: flex;
  align-self: stretch;
  align-items: center;
  flex-direction: column;
  margin-bottom: 0px;
}

.services-detail-intro__title {
  fill: var(--dl-color-theme-primary1);
  color: var(--dl-color-theme-primary1);
  font-style: normal;
  text-align: center;
  font-weight: 700;
  margin-bottom: 0px;
}

.services-detail-intro__description {
  text-align: justify;
  font-weight: bold;
  width: 80%;
} 

/* BEM Detalle de Servicios */

.service-detail {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  display: flex;
  align-self: center;
  align-items: center;
  margin-bottom: 100px;
  flex-direction: column;
}

.service-detail__header {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  padding-top: 30px;
  flex-direction: column;
  justify-content: center;
  background-color: var(--dl-color-theme-primary1);
}

.service-detail__title {
  fill: var(--dl-color-theme-neutral-light);
  color: var(--dl-color-theme-neutral-light);
  font-size: 2.5em;
  margin-top: -20px;
}

.service-detail__subtitle {
  fill: var(--dl-color-theme-neutral-light);
  color: var(--dl-color-theme-neutral-light);
  font-size: 20px;
  font-style: italic;
  margin-top: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}

.service-detail__body {
  flex: 0 0 auto;
  width: 70%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.service-detail__description {
  margin-top: 20px;
  text-align: justify;
  margin-bottom: 20px;
}

/* Zona de bullets */

.service-detail__features {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.service-detail__features-grid {
  width: 100%;
  height: auto;
  display: grid;
  place-items: center;
  grid-row-gap: var(--dl-layout-space-threeunits);
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

.service-detail__feature {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
}

/* Posiciones en el grid 2x2 */
.service-detail__feature--top-left {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 2;
}

.service-detail__feature--top-right {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 2;
  grid-column-end: 3;
}

.service-detail__feature--bottom-left {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 2;
}

.service-detail__feature--bottom-right {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 3;
}

/* Icono + texto */

.service-detail__feature-icon-wrapper {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  display: flex;
  align-items: flex-start;
}

.service-detail__feature-icon-wrapper--tall {
  height: 100px;
  align-items: center;
  justify-content: center;
}

.service-detail__feature-icon {
  width: 70px;
  object-fit: cover;
}

.service-detail__feature-text-wrapper {
  flex: 0 0 auto;
  width: 75%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
}

.service-detail__feature-text {
  width: 100%;
  font-style: normal;
  font-weight: 700;
  margin-left: 20px;
}

/* Sección "Digitalización de Planos" – reusa service-detail */

.service-detail__features-row {
  width: 100%;
  height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.service-detail__feature--single {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  margin-top: 20px;
  align-items: center;
  justify-content: center;
}

.service-detail__feature-text-wrapper--narrow {
  flex: 0 0 auto;
  width: 37%;
  height: 100%;
  display: flex;
}

@media(max-width: 991px){
  .services-detail-intro__description {
    text-align: left;
  }

  .service-detail__description {
    text-align: left;
  }
}

@media(max-width: 767px){
  .services-detail-intro__description {
    margin-top: 20px;
  }
  
  .service-detail__title {
    width: 80%;
    text-align: center;
  }

  .service-detail__feature {
    flex-direction: column;
  }

  .service-detail__feature-text {
    text-align: center;
    margin-left: 0;
  }
}

@media(max-width: 479px){
  .service-detail__title {
    width: 75%;
    font-size: 2em;
  }

  .service-detail__subtitle {
    width: 80%;
    text-align: center;
  }

  .service-detail__feature-icon {
    width: 60px;
  }

  .service-detail__feature-text-wrapper {
    width: 100%;
  }

  .service-detail__feature-text {
    font-size: 14px;
  }

  .service-detail__feature-icon-wrapper--tall {
    height: auto;
  }
}