/* Estilo del Contenedor Flexible (Flexbox) */
.servicio-row {
  display: flex;
  align-items: center;
  gap: 4rem;
  padding: 3rem 0;
}

/* Para móviles: Columna simple */
@media (max-width: 768px) {
  .servicio-row {
    flex-direction: column !important;
    /* Fuerza columna en móvil */
    gap: 2rem;
    text-align: center;
  }

  .lista-servicios {
    text-align: left;
    /* La lista se ve mejor alineada a la izquierda */
    display: inline-block;
  }
}

/* Clase para invertir el orden (Texto - Imagen vs Imagen - Texto) */
.servicio-row-reverse {
  flex-direction: row-reverse;
}

.servicio-info {
  flex: 1;
  /* Ocupa el 50% */
}

.servicio-img-container {
  flex: 1;
  /* Ocupa el 50% */
}

/* Estilos de la imagen */
.servicio-img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  object-fit: cover;
  aspect-ratio: 4/3;
  /* Mantiene proporciones rectangulares elegantes */
  transition: transform 0.3s ease;
}

.servicio-img:hover {
  transform: scale(1.02);
}

/* Icono grande */
/* .servicio-icono {
  font-size: 3rem;
  margin-bottom: 1rem;
} */

/* Lista bonita */
.lista-servicios {
  list-style: inside;
  padding: 0;
  margin: 1.5rem 0;
}

.lista-servicios li {
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
  color: var(--text-muted);
}

/* Línea separadora sutil */
.separador {
  border: 0;
  height: 1px;
  background: var(--border-color);
  margin: 0;
}