/* ===========================
   Servicios — Layout y espaciados
   =========================== */

/* Imagen: sin medidas fijas que rompan la fila */
.service-image,
#imageServices {
  display: block;
  width: 100%;
  max-width: 22rem;        /* más contenida para que no empuje al texto */
  aspect-ratio: 2 / 1;     /* mantiene proporción horizontal */
  object-fit: cover;
  object-position: center;
  margin-left: auto;
  margin-right: auto;

  border: 3px solid #fff;
  background-position: center;
  background-size: cover;
  background-clip: padding-box;
  transition: 0.5s;
  box-shadow: 0 4px 8px rgba(0,0,0,.2), 0 6px 20px rgba(0,0,0,.19);
}

/* Texto: un poco más chico para encuadrar mejor con la imagen */
.service-text {
  font-size: 1.4rem; /* ~17px */
  line-height: 1.5;
}

/* Fila: alinear verticalmente imagen y texto */
.service-section {
  align-items: center;
}

/* Títulos centrados y con menos/justo espaciado */
#servicesTittles {
  margin-top: .25rem;
  margin-bottom: .5rem;
}

/* Títulos de la sección Servicios */
#services,
#servicesTittles { font-weight: 500; }

/* Separación entre servicios (más aire para que el ancla no pise el anterior) */
hr.f-line {
  margin: 2rem auto;
}

/* Texto de cada servicio */
.service-text,
.fs-4 { font-weight: 400; }

/* Anclas: offset para navbar fija al saltar a la sección */
#GNatural,
#EERenovables,
#EElectrica,
#AEstrategica {
  scroll-margin-top: 6.5rem;
}

/* ======= Responsive ======= */

/* Mobile: imagen ocupa ancho cómodo y apila con el texto */
@media (max-width: 767.98px) {
  .service-image,
  #imageServices {
    max-width: 100%;
    aspect-ratio: 16 / 9; /* un poco más baja en móviles */
  }

  .service-text {
    font-size: 1rem;
  }
}

/* Tablet/desktop: ya quedan en la misma fila por col-md-4 / col-md-8 */
@media (min-width: 768px) {
  .service-text { text-align: left; }
}